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

我有一个带有以下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.addMessagemessage；我知道这是基于addMessage中的日志输出的。另外，我在Ember Inspector中确认模型正在更新。但是，DOM并没有改变。如果我切换到另一条路线并返回，列表将显示Faye客户端监听时收集的所有项目。我不太确定该怎么做才能使列表动态更新

我确实注意到，如果我使用{{each in content}或{{each in model.content}而不是{{with}}块，则会出现一个错误，无法将属性“dataSourceBinding”设置为未定义。另外，我也看到有人建议使用这个。设置。。。但这在我的例子中不起作用，因为我必须从静态上下文调用它，所以它是未定义的

---

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

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

由于您试图监视messages对象，因此您正在监视引用是否更改，而不是它下面的任何内容是否更改

---

我也不相信你想使用observes而不是property，但我在手机上，你真的很痛苦。这很有趣-将getAllMessagesList的observes更改为property会导致函数不存在。模型中有一个类型错误，你不能调用undefined。我尝试了这两种-更改push。。。要推送对象。。。和添加对象…，两者都没有任何效果。啊，你试图监视一个对象，而不是任何特定的属性，这意味着它永远不会重新计算。你需要切换到数组并监视数组或手动触发notifyPropertyChange