更新侧边栏视图内容的 Ember.js 最佳实践是什么？答案

【问题标题】：What is the Ember.js best practice for updating sidebar view content?更新侧边栏视图内容的 Ember.js 最佳实践是什么？
【发布时间】：2013-01-28 00:23:36
【问题描述】：

我正在开发一个简单的应用程序。作为应用程序的一部分，有一个侧边栏显示较大集合的子集。主集合显示在右侧并显示集合中的所有项目，其中侧边栏显示标记“已加星标”设置为 TRUE 的项目子集。

我有一个名为“Campaigns”的简单控制器，看起来像这样......

var App = require('app');

App.CampaignsIndexController = Em.ArrayController.extend({

});

模型看起来像这样......

var App = require('app');
var attr = DS.attr;

App.Campaign = DS.Model.extend({

    name: DS.attr('string'),
    starred: DS.attr('boolean')

});

在这个例子中保持基本的。

我们的 App Router 映射如下...

var App = require('app');

App.Router.map(function() {

    this.route('index', { path: '/'});

    this.resource('campaigns', { path: '/campaigns'}, function() {

        this.route('new', { path: '/new' });
        this.route('campaign', { path: '/:campaign_id' });

    });

});

主应用程序模板如下所示。注意侧边栏视图是如何直接放入模板中的。出口{{ outlet page }} 是上面的路线将丢弃其内容的地方。在此示例中，/campaigns 路径将显示{{ outlet page }} 中所有活动的列表。

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

    <div id="sidebar" class="">

        {{ view App.StarredCampaignsView }}

    </div>

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

        {{ outlet page }}

    </div>

</div>

活动的路由将渲染连接到页面出口...

var App = require('app');

App.CampaignsCampaignRoute = Ember.Route.extend({

    renderTemplate: function(controller, model) {

        this.render({outlet: 'page'});

    }

});

我的困境
绑定传入的内容的最佳实践是什么

{{ view App.StarredCampaignsView }}

以便它反映在

中看到的确切集合

{{ outlet page }}?

奖励积分
将集合过滤为模型中看到的布尔标志“已加星标”的最佳做法是什么？

【问题讨论】：

标签： javascript model-view-controller controller ember.js

【解决方案1】：

将其绑定到控制器内部定义的计算属性

控制器

filteredValues: function(){
  //returns all the records whose starred property is true
  return this.get('campaigns').filterProperty("starred"); 
}.property('campaigns.@each.starred')

车把

<div id="sidebar" class="">
  {{#collection contentBinding="filteredValues"}}
    <b>{{view.content.name}}</b>
  {{/collection}}
</div>

【讨论】：

谢谢，但是我应该把计算的属性定义放在哪里？在 App.CampaignsIndexController 或 App.StarredCampaignsController 内？此外，鉴于上述{{ view App.StarredCampaignsView }} 的定义。如何将此视图分配给控制器 App.StarredCampaignsController 并将控制器内容绑定到活动集合？
您可以将计算的属性定义放在 App.StarredCampaignsController 中，为了将视图绑定到控制器只需执行 {{view App.StarredCampaignsView controllerBinding="App.StarredCampaignsController"}}，还要确保您在您的 App.StarredCampaignsController 中有“campaigns”属性