Question

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

我有触发setByInitial的按钮，它将相关的初始数组复制到内容中。

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

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

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

胖子（大约3ms）更新了内容aray（可以通过一些日志记录到控制台看到），但不会导致视图更新。

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

更快，但也不更新视图。

我尝试过使用arrayContentDidChange（）等，但也无法使用它。

如果我使用更快的方法，如何通知视图已更改此dfata？还是有另外一个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>

感谢@ mike-grassotti的例子，我可以看到我正在做的事情应该有效，但它仍然没有！通常情况下，我在这里发布的是简化。我真正的应用程序并不是那么直接......

我的索引模板包含多个视图。每个视图都有自己的数据和控制器。所以看起来这种复杂性正在打破它。所以，我从迈克的例子开始，只是添加了一点 - 为了走向我真正想要的东西 - 并迅速打破它！

我现在有：

var App

= Ember.Application.create({})

App.Router.map(function() {
    this.resource('index',      {path: '/'});
    this.resource('station',    {path: '/:code/:name'});
    this.resource('toc',        {path: '/toc/:code/:name'});
});

App.Station = Ember.Object.extend({});

App.IndexController = Ember.ObjectController.extend({
    needs   : ["StationList"],

    listStationsByInitial: function(initial)
    {
        this.get("controllers.StationList").listByInitial(initial)
    }
});

App.StationListView = Em.View.extend({
    stationsBinding : 'App.StationListController',

    init : function()
    {
        console.log("view created",this.stations)
    }
});

App.StationListController = Ember.ArrayController.extend({
    content     : [],
    initials    : [[{u:1,n:'Abe'},{u:2,n:'Ace'}],[{u:3, n:'Barb'},{u:4,n:'Bob'}],[{u:5,n:'Card'},{u:6,n:'Crud'}]],

    init : function()
    {
        this.set("content",this.initials[0])
    },

    listByInitial : function(initial)
    {
      this.set("content",this.initials[initial])
      console.log('StationListController',this.content);
    }
});

和

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>

首先，我不再看到渲染的电台列表。既不是最初，也不是点击按钮。

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

我在这里做错了什么？

其次，当我单击按钮A或B时，我的函数listStationsByInitial被调用。所以当我点击按钮C时，我希望调用listByInitial（在StationListController中）（因为它在我已经说过要使用的视图里面） StationListController）。但相反，我得到一个错误：

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

为什么不起作用？

我在这里倍感沮丧，因为我已经使用1.0.pre版本构建了一个非常大而复杂的Ember应用程序（http://rail.dev.hazardousfrog.com/train-tickets），现在我正试图让我的知识与最新版本保持同步并且发现我学到的东西几乎不再适用了！

Answer 1

如果我使用更快的方法，如何通知视图已更改此dfata？

您不应该通知视图，这是通过绑定来处理的。我在你的例子中看不到任何会阻止绑定自动更新的内容，并且做了一个简单的jsFiddle来演示。鉴于以下情况，当用户点击其中一个按钮并自动查看更新时，将修改工作站列表：

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>

请参阅：http://jsfiddle.net/mgrassotti/7f4w7/1/

Ember ArrayController绑定到视图

1 个答案: