0

追加後にコメント一覧を自動更新したい

問題は、フィクスチャを使用して emberjs サンプルから開始し、ページの開始時に現在のデータを取得できるように変更したことです。ajax を介してコメント機能を追加することも追加しましたが、これらはすべてうまく機能します。新しいコメントを追加した後に自動的に表示する方法がわかりません。

これは私のアプリコードです:

window.Comments = Ember.Application.create();

Comments.Comment = DS.Model.extend({
   content: DS.attr('string')
});

Comments.ApplicationController = Ember.ArrayController.extend({
rootElement: "#out",
actions: {
    createComment: function () {
        var title = $('#new-comment').val();
        if (!title.trim()) { return; }
        var comment = this.store.createRecord('comment', {
            content: title
        }); 
        this.set('newContent', '');
        comment.save();
    }
}
});

Comments.commentsView = Ember.View.extend({
id: 'com',
layoutName: 'commentsTemplate',
comments: null,
init: function() {
    console.log('init');
    var par = this;
    $.ajax({
        url: "/getcomments",
        type: "GET",
        success: function(data) {
            par.set("comments", data);
        }
    });
}
});

そしてこれが私のテンプレート

<div id="out"></div>

    <script type="text/x-handlebars">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                {{#view Comments.commentsView}}{{/view}}
            </div>
        </div>
    </div>
    </script>


    <script type="text/x-handlebars" data-template-name="commentsTemplate">
    {{#each comment in view.comments}}
        <div class="well">
            <b>{{comment.content}}</b>
        </div>
    {{/each}}
    <br />
    {{input type="text" id="new-comment" placeholder="What you want to say?" value=newContent action="createComment"}}
    </script>

ところで。var title = $('#new-comment').val();原因がthis.get('newContent')未定義の値を返すことだったので、それを機能させるために何かをしなければなりませんでした

4

1 に答える 1

1

store を使用して新しいコメントを作成および保存していcommentsますが、ビューのプロパティは、ビューの初期化中に生のjson-requestを使用してサーバーから取得されます。

もちろん、コメントを取得するためにも store を使用する必要があります。この場合、コレクションはビューを自動的に更新します。

そして、慣例によりコントローラーにある必要があります。

Comments.ApplicationController = Ember.ArrayController.extend({
  rootElement: "#out",
  content: null,

  loadComments: function() { 
    this.set('content', this.store.find('comment'))
  },

  init: function() { this.loadComments(); this._super() }

ちなみに、保存する前にコメントが追加されるのは、私があまり好きではない機能です。それを避けるために、コメントをフィルタリングすることがあります (正確な構文については不明です)。

  persisted: function () {
    this.get('content').filterBy('isNew', false)
  }.property('content') // or .observes('content.@each') i'm not sure
于 2013-10-06T22:09:51.220 に答える