Ember的房产是什么？ 或者他们是方法吗？

Question

This is probably a legitimately stupid question, but I feel like it is keeping me from understanding large portions of Ember.

In the following code:

App.IndexRoute = Em.Route.extend({
  skipSidebar: true
});    

What is 'skipSidebar:'? What is it in regard to the javascript programming language and what is it in Ember?

Another example:

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

What are 'activate:' and 'deactivate:'?

In the first example I used 'skipSidebar' to render a partial:

{{#unless skipSidebar}}
   {{partial 'sidebar'}}
{{/unless}}

But I'm not really sure why I did that or what it is doing.

Essentially I see these names of what look like methods inside of routes and controllers and I'm not sure where they are coming from. If someone could explain this to me like I'm a golden retriever that would be awesome. When can I use them? When should I use them? How do I use them?

Answer 1

Since you commented that you are familiar with OO programming then this should be easy for you to understand.

What is 'skipSidebar:'? What is it in regard to the javascript programming language and what is it in Ember?

App.IndexRoute = Em.Route.extend({
  skipSidebar: true
});    

In ember everything extends eg is a subclass of Ember.Object , Ember.Object in turn is the basic class object (the fundation) which provides you all the needed mechanics to programm in OO style. So in the case of skipSidebar , this is a class property allocated onto your extended Ember.Route object which as I said is also a subclass of Ember.Object . So now imagine you would extend App.IndexRoute :

App.MyFooRoute = App.IndexRoute.extend({
  someFunction: function() {
    this.get('skypSidebar'); // this would retrieve the correct property defined in App.IndexRoute
  }
});

What are 'activate:' and 'deactivate:'?

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

In this case a Ember.Route has additional functions on top of the basic functionality already provided by Ember.Object , in the case of a route this additional functions are mostly routing related. To make developers live easier ember provides a so called public API which consists of stub functions one can override to be notified when this functions are called in it's lifecycle. This functions are also called hooks . In the case of activate and it's counterpart deactivate , this are called/invoked by ember when a route is about to become active, and respectively un-active eg when the route changes.

To take things further, imagine you want some basic functionality to be always executed but also you want to extend the class and override these hooks without loosing the basic logic, then there is a method for that called this._super() .

App.BasicRoute = Ember.Route.extend({
  activate: function(){
    alert('route activated');
  },
  deactivate: function(){
    alert('route deactivated');
  }
});

Now we extend App.BasicRoute :

App.DifferentRoute = App.BasicRoute.extend({
  activate: function(){
    this._super();
    // do stuff
  },
  deactivate: function(){
    this._super();
    // do atuff
  }
});

The above example would, call activate and respectively deactivate of it's parent class executing alert(...); because we invoked this._super() in the sub class, and additionally execute whatever logic you might have defined in the sub class.

Hope it helps.

Answer 2

From a pure Javascript syntax standpoint, this code:

App.IndexRoute = Em.Route.extend({
  skipSidebar: true
});

is equivalent to this Ruby:

App['IndexRoute'] = Em['Route'].extend( { 'skipSidebar' => true } );

That is, it's assigning an element of a Hash (which in Javascript all objects essentially are) to the result of a method call on an element of another Hash, with an argument that is yet a third Hash, this one in literal form (the basis of JSON).

In fact, you could write the JS in a form almost identical to the Ruby:

App['IndexRoute'] = Em['Route'].extend( { skipSidebar: true } );

... since the Name.Key syntax in Javascript is just a convenient shortcut for Name['Key'] that works when the key string is a valid identifier. This works, too:

App['IndexRoute'] = Em['Route']['extend']( { skipSidebar: true } );

because Javascript is like Python in that methods are really just attributes (Hash elements) whose value is a function/closure.

Semantically, however, what this is doing in Ember is defining a class called IndexRoute , in the App object (which is used for namespacing) as a subclass of the Ember-defined class Route (in the Em object/namespace), and adding a property skipSidebar that will default to true for all new App.IndexRoute objects. So functionally, it's more like this Ruby:

class App::IndexRoute < Em::Route
  attr_accessor :skipSidebar
  def initialize
    @skipSidebar = true
  end
end

In your second example:

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

we're again defining a subclass (this time of Ember.Route rather than Em.Route ), and in the subclass adding or overriding two methods called activate and deactivate . Ruby:

class App::AboutRoute < Ember::Route
  def activate
    self.controllerFor('application').renderAboutSubNav = true
  end
  def deactivate
    self.controllerFor('application').renderAboutSubNav = false
  end
end