Arrays Ember ArrayController绑定到视图

我已经删除了设置初始值数组的init函数。 这是一个数组，索引为“A”、“B”、“C”等。 其中每个都包含以该字母开头的station对象

我有一些启动setByInitial的按钮，它们将相关的初始数组复制到内容中

this.content.setObjects(this.initials[initial])

工作正常，我的视图更新，但速度非常慢（150ms+），站点对象非常大，超过3500个

this.set("content",Ember.copy(this.initials[initial],true))

更新内容的时间要长得多（大约3ms）（通过一些控制台日志可以看到），但不会导致视图更新

this.set("content",this.initials[initial])

速度更快，但也不会更新视图

我尝试过使用arrayContentDidChange（）等，但也无法实现

如果使用更快的方法，如何通知视图此数据已更改？或者还有其他wau可以这样做

App.StationListController = Ember.ObjectController.extend({
    content     : [],
    initials    : [],

    setByInitial : function(initial)
    {
//      this.content.setObjects(this.initials[initial])
        this.set("content",Ember.copy(this.initials[initial],true))
    }
});


<script type="text/x-handlebars" id="stationList">
    <ul>
    {{#each content}}
        <li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
    {{/each}}
    </ul>
</script>

及

t type=“text/x-handlebar”数据模板name=“application”>
{{outlet}}
A.
B
{{{#view App.StationListView controllerBinding=“App.StationListController”}

{{{#每个站}
{{{链接到“站点”u}{{n}{{/linkTo}}
{{else}
没有匹配的电台
{{/每个}}

C
{{/view}}}

首先，我不再看到站点列表。既不是最初，也不是点击按钮

我期望{{with content}}从App.StationListController.content获取数据，但这不起作用。因此，我创建了App.StationListView，其中绑定了StationBinding到该控制器。还是没有快乐

我做错了什么

其次，我的函数listStationsByInitial在我单击按钮A或B时被调用。因此，我希望listByInitial（在StationListController中）在我单击按钮C时被调用（因为它在我说过使用StationListController的视图中）。但是我得到了一个错误：

错误：断言失败：App.StationListController上不存在操作“listByInitial”

为什么不起作用

我在这里倍感沮丧，因为我已经使用1.0.pre版本构建了一个相当大且复杂的Ember应用程序（），现在我正试图用最新版本更新我的konwledge，但发现我学到的几乎没有任何东西适用了

如果使用更快的方法，如何通知视图此数据已更改

您不必通知视图，这是通过绑定完成的。在您的示例中，我看不到任何会阻止绑定自动更新的内容，并制作了一个简单的JSFIDLE进行演示。鉴于以下情况，当用户点击其中一个按钮并自动更新视图时，将修改站点列表：

App = Ember.Application.create({});
App.Router.map( function() {
    this.route('stationList', {path: '/'});
    this.route('station', {path: '/station/:station_id'});
});
App.Station = Ember.Object.extend({});
App.StationListController = Ember.ObjectController.extend({
    content     : [],
    initials    : [
        [{u:1,n:'Abe'}, {u:2,n:'Ace'}],                                                                   [{u:1,n:'Barb'}, {u:2,n:'Bob'}]
    ],
    setByInitial : function(initial)
    {
      console.log('setByInitial', initial); 
      this.set("content",this.initials[initial])
    }
});

<script type="text/x-handlebars" id="stationList">
  <h2>Stations:</h2>
    <button {{action setByInitial '0'}}>A</button>
    <button {{action setByInitial '1'}}>B</button>
   <ul>
    {{#each content}}
        <li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
    {{/each}}
    </ul>
</script>

App=Ember.Application.create（{}）；
App.Router.map（函数（）{
this.route（'stationList'，{path:'/'}）；
这个路径（'station'，{path:'/station/:station_id'}）；
});
App.Station=Ember.Object.extend（{}）；
App.StationListController=Ember.ObjectController.extend({
内容：[]，
姓名首字母：[
[{u:1，n:'Abe'}，{u:2，n:'Ace'}]，{u:1，n:'Barb'}，{u:2，n:'Bob'}]
],
setByInitial：函数（初始）
{
console.log（'setByInitial'，首字母）；
this.set（“content”，this.initials[首字母]）
}
});
电台：
A.
B

{{{#每个内容}
{{{链接到“站点”u}{{n}{{/linkTo}}
{{/每个}}

---

请参阅：

感谢您提供上述代码。这表明我所做的应该是有效的。我仍然不能完全确定我错在哪里，但以它为基础，重新构建我的应用程序，因为它最终起作用了（在第一步破坏它之后！）。

t type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <button {{action listStationsByInitial '0'}}>A</button>
    <button {{action listStationsByInitial '1'}}>B</button>

    {{#view App.StationListView controllerBinding="App.StationListController"}}
    <ul>
    {{#each stations}}
        <li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
    {{else}}
        <li>No matching stations</li>
    {{/each}}
    </ul>

    <button {{action listByInitial '2'}}>C</button>

    {{/view}}}
</script>

App = Ember.Application.create({});
App.Router.map( function() {
    this.route('stationList', {path: '/'});
    this.route('station', {path: '/station/:station_id'});
});
App.Station = Ember.Object.extend({});
App.StationListController = Ember.ObjectController.extend({
    content     : [],
    initials    : [
        [{u:1,n:'Abe'}, {u:2,n:'Ace'}],                                                                   [{u:1,n:'Barb'}, {u:2,n:'Bob'}]
    ],
    setByInitial : function(initial)
    {
      console.log('setByInitial', initial); 
      this.set("content",this.initials[initial])
    }
});

<script type="text/x-handlebars" id="stationList">
  <h2>Stations:</h2>
    <button {{action setByInitial '0'}}>A</button>
    <button {{action setByInitial '1'}}>B</button>
   <ul>
    {{#each content}}
        <li>{{#linkTo "station" u}}{{n}}{{/linkTo}}</li>
    {{/each}}
    </ul>
</script>