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

我正在使用 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(默认主干行为)

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

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

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

将 ResultView 绑定(bind)到我模板中的 li.result 因为它在 DOM 中尚不存在

从我的模板中删除 li.result，因为我仍然需要它来为那些没有启用 JavaScript 的人呈现页面服务器端

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

谢谢!

最佳答案

我建议简单地从您的 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');
}