1

ページに編集可能な一連のコメントがあります。私のアイデアは、Rails でコメントをレンダリングし、バックボーン コレクションにすべてのコメントを含む json をプリロードすることでした。

次に、x 秒ごとにポーリングして、変更があるかどうかを確認します。通常、すべてのモデルをループしてコレクションをレンダリングし、各アイテムのビューを作成します。モデルが更新されると、ビューも更新されます (この場合のコメント)。

しかし、私の質問はこれです。ビューが既に DOM にある場合、どのようにビューをモデルにバインドしますか。特に、ビューには動的 ID があったためです。ビューは既に存在するため、レンダリングしても意味がありません。ビューをレンダリングすると、バックボーンはある種のcidを介してそれをバインドします。

私が考えることができる唯一の解決策は、ページロード時にdomオブジェクトにIDを設定することです。いいえ

<div id="comment-<%= content.id %>"></div>

. そして、ビューの初期化で、IDをリセットします

class Comment extends Backbone.View
    initialize: ->
       @id = "comment-" + @model.get('id')

しかし、それが進むべき道かどうかはわかりません。イベントはまだバインドされますか?

4

1 に答える 1

2

あなたのための特別な ：）

var CommentsView = Backbone.View.extend({
  tagName : 'ul',
  comments : {},
  initialize : function () {
    this.listenTo(this.collection, 'add', this.addComment);
    this.listenTo(this.collection, 'remove', this.removeComment);
    this.listenTo(this.collection, 'change', this.updateComment);
  },
  addComment : function (model) {
    this.comments[model.id] = new CommentView({model:model});
    this.$el.append(this.comments[model.id].render().$el);
  },
  removeComment : function (model) {
    this.comments[model.id].remove();
    this.comments[model.id] = null;
  },
  updateComment : function (model) {
    this.comments[model.id] = new CommentView({model:model});
    this.$('[data-id="' + model.id + '"]').before(this.comments[model.id].render().$el).remove();
  }
});

var CommentView = Backbone.View.extend({
  tagName : 'li',
  template : _.template('<div data-id="<%= id %>"><%= name %>: <%- message %></div>'),
  render : function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

// comments
var initialComments = [{id:1, name:'user1', message:'great!'}, {id:2, name:'user2', message:':)'}];
var actualComments = [{id:1, name:'user1', message:'great! [edited]'}];

var comments = new Backbone.Collection();
var commentsView = new CommentsView({collection:comments});

// show comments
commentsView.render().$el.appendTo('body');

// simulate fetch
comments.add(initialComments);

// simulate update
_.delay(function() {
  comments.update(actualComments);
},
2000);

jsfiddle

于 2013-01-19T16:33:28.760 に答える