如何将现有的 dom 元素绑定到主干集合视图

Question

我在一个页面上有一系列的 cmets，可以对其进行编辑。我的想法是通过 Rails 渲染 cmets，并在 Backbone 集合中预加载包含所有这些 cmets 的 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')

但我不确定这是否可行。事件还会被绑定吗？

Answer 1

特别适合你:)

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