视图中的视图？如何使用 Backbone.js 生成项目列表？答案

【问题标题】：Views within Views? How to generate lists of items with Backbone.js?视图中的视图？如何使用 Backbone.js 生成项目列表？
【发布时间】：2012-04-03 02:35:55
【问题描述】：

我正在尝试构建一个项目列表（例如书籍），然后我想允许用户过滤此列表（例如按作者）。我希望列表中的每个项目都有自己的视图，并且列表本身也将有一个视图。但是，我似乎无法“看到”它们如何在 Backbone 中组合在一起。

目前，我的代码如下（coffee-script）：

class Book extends Backbone.Model

class BookList extends Backbone.Collection
  model: Book
  url: "/library/books.json"

books = new BookList

class BookListView extends Backbone.View
  initialize: ->
    @template = _.template('''
      <ul>
        <% books.each(function(book){ %>
          <li><%= book.get('title') %>, <%= book.get('author') %></li>
        <% }); %>
      </ul>
    ''')
    @render

  render: ->
    template = @template
    books.fetch success: -> jQuery("#books").html(template({'books': books}))

我想了解的是如何使用自己的视图+模板创建列表中的每个 <li> 元素，以便我可以按作者过滤它们。

【问题讨论】：

标签： backbone.js coffeescript

【解决方案1】：

虽然这样写当然可以，但如果你有模板嵌套视图嵌套模板，无穷无尽......

相反，为什么不将您的图书视图插入到列表中：

render: ->
  $(this.el).html this.template()
  bookHTML = for book in Books
    (new BookView model: book).render().el
  this.$('.book_list').append bookHTML

【讨论】：

谢谢！如何使用 Underscore 的 filter 方法按作者过滤书籍？
Books.filter(function(book){ return book.author == expectedAuthor; });
这种方法会在每次调用 render 时泄漏 BookViews 吗？如果是这样，如果这些视图引用仍然存在且有效的模型对象，是否很难摆脱这些视图？
有人请回答布雷特的问题！
@Brett, @Chetan: AFAIK，只要没有引用 BookView 实例（因为它们仅用于提取 el 属性值），它们就会被垃圾回收在下一次运行。 BookView 是否引用 el 无关紧要。