javascript - 如何在 ember.js 中构建评论系统

Question

我是 ember.js 的新手。我目前正在开发一个学校项目，该项目本质上是一个留言板(论坛)应用程序，允许用户添加带有评论的帖子。

我的应用程序包含三个模型:类(class)、消息、评论

类(class)->hasMany->消息->hasMany->评论

到目前为止，我已经能够使用服务器的过滤器查询来查看所有类(class)和相关消息。添加新消息也可以正常工作，只是它不会更新添加到屏幕上的新消息。

问题:只有当我刷新页面时，才会显示我添加的新消息。

App.Router.map(function() {
    this.resource('home', { path : '/'}, function() {
        this.resource('mycourse', { path : ':course_id' } );
    });
});

App.MycourseRoute = Ember.Route.extend({
    model: function(params) {
        // the model for this route is a new empty Ember.Object
        var string = '{"filters":[{"name":"courseid","op":"eq","val":'+params.course_id+'}]}'
        return this.store.find('message', { q: string });
    }
 });

App.HomeRoute = Ember.Route.extend(
{
    model: function() {
        return this.store.find('course');
    }
});

这是我的消息 Controller :

App.MycourseController = Ember.ArrayController.extend({

        actions: {

                addMessage: function(messageText) {
                        var message = messageText;

                        var messageAdd =this.store.createRecord('message', {
                                message: message,
                                posttime: "12:00pm",
                                courseid: 4,
                                userid: 1
                        });

                        messageAdd.save();
                }
        }

});

我的 html 部分:

 <script type="text/x-handlebars" id="home">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            {{#each}}
            <li>{{#link-to 'mycourse' this.id}}{{name}}{{/link-to}}</li>
            {{/each}}
          </ul>
        </div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">Subscribed Courses:</h1>
        {{outlet}}
        </div>
      </div>
 </script>

 <script type="text/x-handlebars" id="mycourse">
        <button class="btn btn-default" type="button" id="create-message" {{action "addMessage" messageTxt}}>
        Post!
        </button>
      {{input type="text" value=messageTxt}}
      <br><br>

      {{#each}}
        <b>{{message}}</b>

        <li>{{posttime}}</li>
        <li>User name: {{user.username}}</li>
        <li>Course name: {{course.alt_name}}</li>
        <h4>Comments:</h4>
        {{#each comments}}
          <li>{{comment}}</li>
        {{/each}}
        <br>
      {{/each}}
 </script>

Answer 1

事实证明，当您使用 findQuery (我相信这与使用带有查询参数的 find 相同)时，Ember 不会返回实时更新数组，而它会返回直接find/findAll。请参阅this question on that exact issue我不久前问过。

这里的解决方案(改编自 kingpin2k 对上述问题的回答)是使用 filter 来欺骗 Ember 自动更新:

App.MycourseRoute = Ember.Route.extend({
    model: function(params) {
        // the model for this route is a new empty Ember.Object
        var string = '{"filters":[{"name":"courseid","op":"eq","val":'+params.course_id+'}]}'
        return this.store.find('message', { q: string });
    },

    setupController:function(controller, model){
      var filter = this.store.filter('color', function(color){
        return model.contains(color);
      }); 

      this._super(controller, filter);
    }
});