famo.us: sub-classing Surface

Question

I've seen a few examples of sub-classing the "Surface" or "View" classes in famo.us. Here's one simple example:

define(function(require, exports, module) {
    var Surface = require('famous/core/Surface');
    var View = require('famous/core/View');

    function SettingsView() {
        View.apply(this, arguments);    
        this.add(new Surface({ content: 'settings' }));
    }

    SettingsView.prototype = Object.create(View.prototype);
    SettingsView.prototype.constructor = SettingsView;

    SettingsView.DEFAULT_OPTIONS = {};

    module.exports = SettingsView;
});

I have 3 questions about this:

What is the purpose of View.apply(this, arguments);? Is this a "javascript thing" or a "famo.us thing"?
What if I wanted to pass width and height properties into the SettingsView .ctor so I could then pass them into the View .ctor? Is that what the apply method does?
What is the meaning of SettingsView.DEFAULT_OPTIONS = {};?

score 1 · Accepted Answer · answered May 20 '14 at 15:50

You use apply to... apply... an array of arguments to an object. A better description is found on **MDN

The shortform is that apply expects (1) a value for this and secondly an array of arguments. you'll notice in your example there is no array though. That's because if you use arguments you can pass all of the arguments of the enclosing function into the object that apply is being called for. In this case, the arguments passed into SettingsView() will be subsequently applied to a enclosed View

Outside of the SettingsView function you'll see that the prototype of SettingsView is being used to create a new View, and then we set the constructor of SettingsView to basically call SettingsView()

See how the loop completes. So when call the constructor of SettingsView e.g var mySettings = new SettingsView(); all the arguments I pass through to the constructor will be passed to the constructor of the View. In addition, a Surface is created with the content option pre-filled to "settings." In the real world, that could be a button, or image or something that you might want to reuse.

You'll find if you look at the source of View there is a DEFAULT_OPTIONS object with various properties that are used if we don't explicitly state them when creating a new instance of a View. In your example, we're basically just clearing the contents of that object. Refer to what you need to pass to a typical famo.us View in the docs so that the View you create has all the necessary properties/options.

As for passing size properties into a View, it doesn't work like that. Think of a famo.us View as a Grouping of other famo.us renderables(Surfaces) You could however pass a variable to your SettingsView Constructor which is then used to set the width and height value of the Surface it contains. That's how you'd go about it.

I definitely recommend getting a book on this, I'm finding Speaking Javascript quite useful at the moment as it disposes with the usual "what is a computer program?" riff raff. Prototypes and the likes are really crucial to building JS apps, and the process occurs frequently when you're using famo.us

This might need a little bit of editing to make clearer.

famo.us: sub-classing Surface

1 Answers1