Ember.js 不使用观察到的值更新 DOM

Question

我有一个带有这个 javascript 的 Ember.js 应用程序：

var App = Ember.Application.create({
    LOG_TRANSITIONS: false,
    LOG_TRANSITIONS_INTERNAL: false,
    LOG_VIEW_LOOKUPS: false,
});

App.Router.map(function() {
    this.route('messageviewer', { path: '/message_viewer' });
});

App.Message = Ember.Object.extend({
    message: {},
    topic: '',
});
App.Message.reopenClass({
    messages: {},
    topics: [],

    getAllMessagesList: function(){
        var ret = [];
        for(var i = 0; i < this.topics.length; i++){
            ret = ret.concat(this.messages[this.topics[i]]);
        }
        return ret;
    }.observes('App.Message.messages');

    addMessage: function(message){
        console.log(message);
        if(!(message.topic in this.topics)){
            this.topics.push(message.topic);
            this.messages[message.topic] = [];
        }
        this.messages[message.topic].push(App.Message.create({
            message: message,
            topic: message.topic,
        }));
    },
});

App.MessageviewerRoute = Ember.Route.extend({
    model: function(){
        return App.Message.getAllMessagesList();
    },
});

App.MessageviewerView = Ember.View.extend({
    templateName: 'messageViewer',
    didInsertElement: function(){
        Ember.run.scheduleOnce('afterRender', this, fayeStartListening);
    },
    willDestroyElement: function(){
        fayeStopListening();
    },
});

这是视图的模板：

<div class="row">
    <div id="filter-panel" class="col-md-3">
        <h2>Topics</h2>
        <div class="btn-group-vertical full-width" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="topics">Test 1</input>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="topics">Test 2</input>
            </label>
        </div>

        {{#with content}}
            {{#each}}
                {{!-- Make a topic list for testing --}}
                <h4>{{topic}}</h4>
            {{/each}}
        {{/with}}
    </div>
</div>

还有一个 Faye 客户端正在运行，它订阅了一个每秒收到很多消息的频道。在其订阅中，它调用App.Message.addMessage(message);，我知道这是基于 addMessage 中的日志输出工作的。此外，我已在 Ember Inspector 中确认模型正在更新。但是，DOM 并没有改变。如果我切换到不同的路线并返回，列表会显示 Faye 客户端正在收听时收集的所有项目。我不太确定应该怎么做才能让列表动态更新。

我确实注意到，如果我使用 {{#each in content}} 或 {{#each in model.content}} 而不是 {{#with}} 块，则会收到错误消息“无法设置未定义的属性 'dataSourceBinding'”。另外，我看到有人建议使用this.set(..., ...)，但这在我的情况下不起作用，因为我必须从静态上下文中调用它，所以它是未定义的。

有谁知道如何说服 Ember 实时更新 DOM？

Answer 1

使用 pushObject 或 addObject 代替 push，类似于数组的 setter。

由于您正在尝试查看消息对象，因此您正在查看引用是否更改，而不是它下面的任何内容是否更改。

http://emberjs.com/api/classes/Ember.Observable.html#method_notifyPropertyChange