【问题标题】:Ember.js: data-binding between controllersEmber.js:控制器之间的数据绑定
【发布时间】:2013-02-07 20:58:21
【问题描述】:

我正在尝试将 ApplicationController 绑定到 IndexController。 Here is my jsfiddle。总而言之,这是我在应用程序控制器中的绑定

indexIsClickedBinding: "App.indexController.isClicked",

isIndexClicked: function() {
    alert("its changed to " + this.get("indexIsClicked") ) ;
}.observes('indexIsClicked'), 

因此,当 IndexController 中的 isClicked 值发生更改时,indexIsClickedBinding 不执行任何操作。有什么建议我的代码有什么问题吗?

干杯

【问题讨论】:

    标签: data-binding controller ember.js


    【解决方案1】:

    虽然解决方案很简单,但让我试着解释一下。如果您不确定,请随时提出任何问题。

    您已绑定到App.indexController实例 上的属性。但是,这个实例并不存在,因为 Ember.JS 不再将控制器的实例直接放在 App 上。

    在之前的 Ember 版本中,它曾经驻留在 App 上,但现在不再存在了,因为使用控制器的绝对名称引用控制器是不好的做法,因为它会在控制器之间创建 tight coupling。 em>

    这就是 Ember.JS 有其他方式来引用控制器的原因。在当前控制器中需要其他控制器是常见的要求。 Ember.JS 有以下方法:

    因此,如果我们实现needs,那么您的控制器现在可以访问另一个控制器,以及它拥有的属性:http://jsfiddle.net/uB5tX/7/

    通过使用needs,我们松散地耦合了控制器。我们已经通过它的名字引用了它,Ember.JS 将为我们查找控制器。如果我们更改App,那么我们不需要更改任何内容,并且如果/当 Ember.JS 更改控制器的行为时,我们不需要再次更新我们的needs,因为当行为发生更改时,那么needs 也会更新,带回正确的控制器。

    【讨论】:

    • 非常感谢!因此,如果您不能使用 App.someController,那么现在它如何在带有 #each 的模板中工作,例如:{{#each App.someController}}
    • 如果您使用needs 方法,则无需指定Controller 部分。如果 IndexController needs AnotherController 那么在 IndexController 中,您只需将其引用为:controllers.another。视图也是如此:#each controllers.another.
    • 好的。最后一种情况。 ArrayController 怎么样,你将如何遍历它。在thisfiddle 他们仍然使用旧的,我无法让它在thisfiddle 中工作
    • 如果您指定context 而不是content,那么您可以直接访问属性(name 等...),而无需在它们之前指定任何内容:@ 987654327@ 我不确定您是否只是因为它是 JSFiddle 而创建实例,但不成文的 Ember 规则是您创建对象而不是实例。例如,如果您创建 App.IndexController 对象,那么当您进入 index 路由以及 IndexViewIndexRoute 时,Ember 将实例化该控制器。
    • 好的,感谢您指出不成文的规则。我已经更新了你的(我的)jsfiddle here。我认为这个例子仍然是一个问题。视图和 Array 控制器仍被引用为 App.PeopleView 和 App.PeopleController (此外,如果您单击原始示例中的名称,则不会发生任何事情!)所以我认为仍然违反了一些 Ember 基本原理
    【解决方案2】:

    您还可以使用以下语法来访问其他控制器的属性:

    import Ember from 'ember';
    
    export default Ember.Controller.extend({
      index: Ember.inject.controller('index'),
      indexIsClicked: Ember.computed.alias("index.isClicked"),
    
      isIndexClicked: Ember.observer('index.isClicked', function() {
        alert("its changed to " + this.get("indexIsClicked"));
      })
    });
    

    但是你需要让 Ember 首先初始化这个控制器,所以你实际上需要调用一些依赖于index 的计算属性(它会延迟初始化它)。因此,例如在我使用的模板中:

    Is index clicked: <b>{{indexIsClicked}}</b>
    

    Working demo.

    【讨论】:

      猜你喜欢
      • 2013-03-11
      • 1970-01-01
      • 2015-07-23
      • 2018-10-06
      • 1970-01-01
      • 2013-12-23
      • 1970-01-01
      • 2012-11-02
      • 1970-01-01
      相关资源
      最近更新 更多