0

这可能是一个合法的愚蠢问题，但我觉得它让我无法理解 Ember 的大部分内容。

在以下代码中：

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

什么是'skipSidebar：'？关于 javascript 编程语言和 Ember 中的内容是什么？

另一个例子：

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

什么是“激活：”和“停用：”？

在第一个示例中，我使用了“skipSidebar”来呈现部分内容：

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

但我不确定我为什么这样做或它在做什么。

本质上，我在路由和控制器中看到了这些看起来像方法的名称，但我不确定它们来自哪里。如果有人能像我是一只金毛猎犬一样向我解释这一点，那就太棒了。我什么时候可以使用它们？我应该什么时候使用它们？我该如何使用它们？

4

2 回答 2

1

从纯 Javascript 语法的角度来看，这段代码：

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

相当于这个 Ruby：

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

也就是说，它将一个 Hash 的元素（在 Javascript 中所有对象本质上都是）分配给另一个 Hash 的元素上的方法调用的结果，其参数是第三个 Hash，这个是文字形式的（ JSON 的基础）。

实际上，您可以将 JS 编写成与 Ruby 几乎相同的形式：

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

...因为Name.KeyJavascript 中的语法只是Name['Key']当键字符串是有效标识符时的一种方便快捷方式。这也有效：

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

因为 Javascript 就像 Python 一样，方法实际上只是属性（哈希元素），其值为函数/闭包。

然而，从语义上讲，这在 Ember 中所做的是IndexRoute在App对象（用于命名空间）中定义一个名为 的类作为 Ember 定义的类Route（在Em对象/命名空间中）的子类，并添加一个skipSidebar默认的属性为true所有新App.IndexRoute对象。所以在功能上，它更像是这个 Ruby：

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

在您的第二个示例中：

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

我们再次定义了一个子类（这次是Ember.Route而不是Em.Route），并在子类中添加或覆盖两个称为activateand的方法deactivate。红宝石：

class App::AboutRoute < Ember::Route
  def activate
    self.controllerFor('application').renderAboutSubNav = true
  end
  def deactivate
    self.controllerFor('application').renderAboutSubNav = false
  end
end
于 2013-09-04T20:14:45.973 回答
1

既然您评论说您熟悉 OO 编程，那么您应该很容易理解。

什么是'skipSidebar：'？关于 javascript 编程语言和 Ember 中的内容是什么？

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

在 ember 中，所有东西都扩展，例如是 的子类Ember.Object，Ember.Object反过来又是基本类对象（基础），它为您提供了以 OO 风格进行编程所需的所有机制。因此，在 的情况下skipSidebar，这是分配给扩展Ember.Route对象的类属性，正如我所说，它也是Ember.Object. 所以现在想象你会扩展App.IndexRoute：

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

什么是“激活：”和“停用：”？

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

在这种情况下，aEmber.Route在 已经提供的基本功能之上具有附加功能Ember.Object，在这种情况下，route附加功能主要与路由相关。为了让开发人员生活得更轻松，ember 提供了一个所谓的公共 API，它由存根函数组成，当这个函数在其生命周期中被调用时，可以重写以得到通知。此函数也称为hooks. 在activate和 它的对应物的情况下，deactivate当路由即将变为活动时，这由 ember 调用/调用，并且分别不活动，例如当路由更改时。

更进一步，假设您希望始终执行一些基本功能，但还想扩展类并覆盖这些钩子而不丢失基本逻辑，那么有一个方法称为this._super().

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

现在我们扩展App.BasicRoute：

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

上面的示例将调用activate和分别deactivate执行它的父类alert(...);，因为我们this._super()在子类中调用，并另外执行您可能在子类中定义的任何逻辑。

希望能帮助到你。

于 2013-09-04T20:02:26.597 回答