2

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

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

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

工作正常，我的视图更新，但是非常慢（150ms +）站对象非常大，其中有超过 3500 个......

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

是否更胖（大约 3 毫秒）更新了内容（从一些日志记录到控制台可以看出），但不会导致视图更新。

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 示例，我可以看到我正在做的事情应该有效，但它仍然没有！通常情况下，我在这里发布的是一种简化。我真正的应用程序并不是那么简单......

我的索引模板包含几个视图。每个视图都有自己的数据和控制器。因此，似乎是某种复杂性破坏了它。所以，我从迈克的例子开始，只添加了一点——为了朝着我真正想要的方向前进——并迅速打破了它！

我现在有：

变种应用

= 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 并绑定了 stationBinding 到该控制器。还是不开心...

我在这里做错了什么？

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

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

为什么那行不通？

我在这里倍感沮丧，因为我已经使用 1.0.pre 版本构建了一个相当大且复杂的 Ember 应用程序（ http://rail.dev.hazardousfrog.com/train-tickets ），现在我正试图提升我的知识 -最新版本，发现我学到的几乎所有东西都不再适用了！

4

1 回答 1

0

如果我使用更快的方法，如何告知该 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/

于 2013-06-25T12:35:04.170 回答