javascript - Ember.js 将数组 Controller 的内容绑定(bind)到不同数组 Controller 的内容时​​出现问题

Question

我们在将 Ember.js 中的一个数组 Controller 的内容与另一个数组 Controller 的内容链接时遇到问题。我们已经搜索了 Stackoverflow，但似乎没有一个解决方案适合我们。

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

营销事件模型:

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

...

战役 Controller 也是基本的。这是一个简单的 ArrayController，里面什么也没有发生......

广告系列索引 Controller :

App.CampaignsIndexController = Em.ArrayController.extend({

});

为了解决这个问题，我们已经将应用程序模板精简到最基本的部分。如下所示，应用程序模板有一个侧边栏。侧边栏中有两个 View 。一个 View 用于网站导航，另一个 View 用于“加星标的营销事件”。此 View 将包含整个广告系列集合的子集。

申请模板:

<!-- ================================================== -->
<!-- ======================= 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>

我们有一个用于加星标广告系列的 Controller 。这就是事情开始变得困惑的地方。在我们的 Controller 中，我们将 ArrayController 的内容绑定(bind)到 CampaignsIndexController 的内容，后者保存所有 Campaign 模型的数组。

加星标的营销事件 Controller :

App.StarredCampaignsController = Em.ArrayController.extend({

    content: [],

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

});

Starred Campaigns 的 View 也非常简单...

加星标的广告系列 View :

App.StarredCampaignsView = Em.View.extend({

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

});

这就是加星标广告系列的模板的样子。它试图循环controller.content中的项目并将它们传递到另一个 View 。

加星标的营销事件模板:

<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.CampaignsIndexController 表示的 App.Campaign 数组也是如此。看到我们的方法有什么问题吗？我觉得我们在这里缺少一些非常简单的东西。

Answer 1

在 Ember 中，为了让 Controller 需要其他 Controller ，您需要使用 needs 属性。这在 Ember 中总是在变化:在以前的版本中，这是路由器与 this.controllerFor 的责任，而对于更旧的版本，该方法更类似于您似乎尝试采用的方法。然而，最终的方法早已被弃用， Controller /模型/ View 的实例不再直接保存在App上，仅保存它们的对象表示。

要直接满足需求，您需要告诉您的App.StarredCampaignsController Controller 它需要App.CampaignsIndexController，例如所以:

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

您现在可以在已加星标的广告系列 View 中访问 App.CampaignsIndexController Controller :{{controllers.campaigns_index}}。

查看简单的 JSFiddle:http://jsfiddle.net/AGJfB/

您的 Controller 无法工作的原因是您引用了 Controller 的对象，而不是其实例:

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

虽然 App 上有一个 App.CampaignsIndexController，但这就是它的对象。当您通过任何 Ember 方式(this.controllerFor、needs、通过 URL 导航到它等)访问它时，Ember 将为您创建实例。 .

过去我们可以使用:

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

但是，这是一种很糟糕的做法，因为您引用了 Controller 的绝对路径。自 Ember pre 1 以来，我从未使用过 Ember.Binding.oneWay，但在某些情况下您仍然需要它。不过，当您发现自己在使用它时，明智的做法可能是问问自己是否有必要，以及是否有更好的方法。

我希望我已经很好地解释了自己。有任何问题请随时提问!