javascript - 将主干 View 重新分配给新创建的 DOM 元素

Question

我正在使用 Backbone 结合 CoffeeScript 和 Handlebars 创建一个搜索结果页面。我有两个 View :一个用于结果列表 (ListView)，第二个 View 用于单个结果 (ResultView)。简化代码:

ListView = Backbone.View.extend
  el: $("ul#results")
  ...

  addItem: (result) ->
    resultView = new ResultView({
      model: result
    })
    resultView.parentView = this
    this.el.append(resultView.render().el)

ResultView = Backbone.View.extend
  tagName: "li"
  className: "result"
  events:
    ...

简短说明:

• ListView 分配给 ul#results
• 当一个结果被添加到 ListView 时，一个 ResultView 被创建，它知道它的父级并呈现自己
• 为 ResultView 创建一个元素 li.result(默认 Backbone 行为)

这是(简化的)我用来呈现搜索结果的模板:

<li class="result">
   <h1>
     <a href="{{link}}">{{title}}</a>
   </h1>
   <p>{{snippet}}</p>
</li>

这是我的难题，正如您自己发现的那样:我在我的 Backbone ResultView 中定义了一个 li.result，and 在我的模板中。我不能做什么:

• 将 ResultView 绑定(bind)到我模板中的 li.result，因为它在 DOM 中尚不存在
• 从我的模板中删除 li.result，因为我仍然需要它来为那些没有启用 JavaScript 的用户呈现页面服务器端

有没有办法在实例化后(优雅地)将主干 View 重新分配给元素？或者简单地说，我可以将 ResultView 引用到一个临时元素，呈现模板然后将其移动到 ul#result 中吗？还是我看错了？

谢谢!

Answer 1

我建议简单地从您的 View 中触发渲染事件，然后在 onRendered 回调中执行您的操作，如下所示:

initialize: function() {
  this.bind('rendered', onRendered);
},

onRendered: function() {
   // do onRendered stuff
   // eg. remove an element from the template
},

render: function() {
  // your render stuff
  this.trigger('rendered');
}