观点内的意见?如何使用Backbone.js生成项目列表?

Phi*_*ham 12 coffeescript backbone.js

我正在尝试构建项目列表(例如书籍),然后我想允许用户过滤此列表(例如,作者).我希望列表中的每个项目都有自己的视图,列表本身也会有一个视图.然而,我似乎无法"看到"这些在Backbone中如何组合在一起.

目前,我的代码如下(咖啡脚本):

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}))
Run Code Online (Sandbox Code Playgroud)

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

jas*_*nas 11

虽然以这种方式编写它当然是可能的,但如果你有嵌套视图嵌套模板的模板,那么事情会变得复杂......

相反,为什么不将您的图书视图插入列表:

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

  • 每次调用渲染时,这种方法是否会泄漏BookViews?如果是这样的话,如果它们引用仍然悬挂并且有效的模型对象,那么它们是否难以摆脱这些视图? (13认同)
  • 有人请回答布雷特的问题! (5认同)
  • @Brett,@ Chetan:AFAIK,只要没有引用`BookView`实例(因为它们只用于提取`el`属性值),它们将在下次运行时被垃圾收集.如果`BookView`引用`el`并不重要. (4认同)
  • Books.filter(function(book){return book.author == expectedAuthor;}); (3认同)