4

ハンドルバーとバックボーンを組み合わせて使用​​しています。子ビューを保持する配列を持つ「コンテナ」ビューが1つあります。新しいビューを追加するたびに、クリックイベントがバインドされません。

私の投稿ビュー：

Post.View = Backbone.View.extend({
    CommentViews: {},
    events: {
        "click .likePost": "likePost",
        "click .dislikePost": "dislikePost",
        "click .addComment button": "addComment"
    },
    render: function() {
        this.model.set("likeCount", this.model.get("likes").length);
        this.model.set("dislikeCount", this.model.get("dislikes").length);
        this.$('.like-count').html(this.model.get("likeCount") + " likes");
        this.$('.dislike-count').html(this.model.get("dislikeCount") + " dislikes");

        return this;
    }, ...

新しいバックボーンビューを作成し、それをハンドルバーテンプレートにアタッチして、ページに表示する「コンテナ」ビューのコールバックコード：

success: _.bind(function(data,status,xhr) {
                        $(this.el).find("#appendedInputButton").val('');
                        var newPost = new Post.Model(data);
                        var newPostView = new Post.View({model: newPost, el: "#wall-post-" + newPost.id});
                        var source = $("#post-template").html();
                        var template = Handlebars.compile(source);

                        var html = template(newPost.toJSON());
                        this.$('#posts').append(html);
                        newPostView.render();
                        this.PostViews[newPost.id] = newPostView;
                    }, this), ...

何が起こっているのかはわかりませんが、この種のコードは最初に実行されてページを設定し（htmlはサーバー側でレンダリングされるため、ハンドルバーはありません）、すべてのイベントが正常に機能します。ページをリロードすると、投稿も好き/嫌いになります。

私は何が欠けていますか？

4

2 に答える 2

2

私はあなたnewPostView.render().elが dom に追加しているのを見ません。または、何か不足していますか?

于 2012-11-02T17:56:07.227 に答える
0

「#post-template」に「likePost」ボタンが含まれているとします。newPostView が DOM に追加されることはありません。

新しい Post.View に el を追加すると、バックボーン検索が DOM になります (要素はまだ存在しません) 4 行後、HTML 文字列が DOM に追加されます (this.el が既に DOM にあると仮定します)。

append(html) の後に Post.View を作成すると、要素が見つかり、イベントが発生します。
しかし、バックボーンの自然な方法は、Post.View レンダリング関数内で HTML 文字列をレンダリングし、結果をその el に追加し、その el を #posts 要素に追加することです。

success: function (data) {
  var view = new Post.View({model: new Post.Model(data)});
  this.$('#posts').append(view.render().el);
  this.PostViews[data.id] = view;
}
于 2012-11-05T22:15:21.657 に答える