Ember.js将数组控制器的内容绑定到不同阵列控制器的内容的问题

Question

我们无法将一个数组控制器的内容与Ember.js中另一个数组控制器的内容链接起来。我们已经淘汰了*，但似乎没有解决方案为我们工作。

该场景很简单。我们有一个名为“运动”的模型。该模型是非常基本的，看起来像这样...

活动型号：

App.Campaign = DS.Model.extend({ 

    name: DS.attr('string'), 
    description: DS.attr('string'), 
    opts: DS.attr('string'), 
    starred: DS.attr('boolean'), 
    keywords: DS.hasMany('App.Keyword') 

}); 

// Create dummy campaign array 

App.Campaign.FIXTURES = new Array(); 

// Populate dummy campaign array 

... 

的运动控制器也是基本。这是一个简单ArrayController有什么事情在里面......

活动指数控制器：

App.CampaignsIndexController = Em.ArrayController.extend({ 

}); 

对于这个问题的缘故，我们已经剥夺我们的应用程序模板下到要领。正如你在下面看到的，应用程序模板有一个侧边栏。在侧边栏中有两个视图。一种观点是针对该网站的导航，另一种观点针对“已加星标的广告系列”。该视图将包含整个广告系列集合的一部分。

应用程序模板：

<!-- ================================================== --> 
<!-- ======================= APP ====================== --> 
<!-- ================================================== --> 

<div id="app" class=""> 

    <!-- ================================================== --> 
    <!-- ==================== SIDEBAR ===================== --> 
    <!-- ================================================== --> 

    <div id="sidebar"> 

     {{ view App.NavigationView }} 

     {{ view App.StarredCampaignsView controller="App.StarredCampaignsController" }} 

    </div> 

    <!-- ================================================== --> 
    <!-- ====================== PAGE ====================== --> 
    <!-- ================================================== --> 

    <div id="page" class=""> 

     {{ outlet page }} 

    </div> 

</div> 

我们有出演广告活动的控制器。这是事情开始变得混乱的地方。在我们的控制器中，我们将ArrayController的内容绑定到CampaignsIndexController的内容，该控件包含所有Campaign模型的数组。

出演广告活动控制器：

App.StarredCampaignsController = Em.ArrayController.extend({ 

    content: [], 

    contentBinding: Ember.Binding.oneWay('App.CampaignsIndexController.content') 

}); 

的已加星标的广告活动的看法也很简单...

出演广告系列查看：

App.StarredCampaignsView = Em.View.extend({ 

    templateName: 'templates/layout/starred-campaigns', 

}); 

这是Starred Campaigns的模板是什么样的。它试图循环controller.content中的项目并将它们传递给另一个视图。

出演广告活动模板：

<h5 class="sidebar-title">Starred Campaigns</h5> 

<ul class="starred-campaigns clearfix"> 

    {{# each item in controller.content }} 

     {{ view App.StarredCampaignItemView itemBinding="item" }} 

    {{/ each }} 

</ul> 

然而，尽管这一切，在StarredCampaignsController内容为空，即使我们填充App.Campaign阵列是App.CampaignsIndexController代表。查看我们方法的任何问题？我觉得我们在这里错过了一些非常简单的事情。

Answer 1

在Ember中，要让控制器需要其他控制器，您需要使用needs属性。在Ember中这一切都会发生变化：在以前的版本中，它是this.controllerFor的路由器的责任，而且即使是旧版本，这种方法更类似于您似乎试图采用的方法。然而，最后的做法早已被弃用，并且控制器/模型/视图的实例不再直接保存在App上，只有它们的对象表示。

为了与need直筒在潜水，你需要告诉你的App.StarredCampaignsController控制器，它要求App.CampaignsIndexController像这样：

App.StarredCampaignsController = Em.ArrayController.extend({ 
    content: [], 
    needs: ['campaigns_index'] 
}); 

您现在可以访问在您加星标的活动的App.CampaignsIndexController控制器查看：{{controllers.campaigns_index}} 。

见简单的jsfiddle：http://jsfiddle.net/AGJfB/

为什么你不工作的原因是因为你参考控制器的对象，而不是它的实例：

Ember.Binding.oneWay('App.CampaignsIndexController.content') 

虽然你在App上有App.CampaignsIndexController，这是它的目的。 Ember将通过任何Ember方式（this.controllerFor，needs，通过URL导航到它等等）访问它时为您创建实例。

在天过去了，我们可以使用：

Ember.Binding.oneWay('App.campaignsIndexController.content') 

然而，这是这样一个糟糕的方式做事情，因为你引用到控制器的绝对路径。自从Ember出现前，我从来没有必要使用Ember.Binding.oneWay，但仍然会有您需要的情况。当你发现自己使用它时，问问自己是否有必要，以及是否有更好的方法来做这件事可能是明智的。

我希望我解释得很好。请随时提出任何问题！