将视图连接到Backbone中的集合

Question

我创建了一个视图，该视图使用输入字段呈现模板。 在输入字段中键入文本时，它会激活一个事件，该事件将创建一个新的View并将其附加到此视图中正在呈现的元素上。

class Movieseat.Views.Moviesearch extends Backbone.View

  template: JST['movieseats/moviesearch']
  el: '#moviesearch'

  initialize: (opts) ->
    {@collection} = opts
    @render()
    return

  render: ->
    $(@el).html(@template())
    return

  events:
    "keyup input": "doSearch"

  doSearch: (e) ->
    @collection.setQuery $(e.currentTarget).val()
    @collection.fetch()
    view = new Movieseat.Views.Searchresult()
    $('#movies').append(view.render().el)

如果我是正确的，则由于Moviesearch名称，视图和集合是“链接的”。

但是对于我的Searchresult视图，我正在使用它。 而且我认为我没有将其“链接”到我的Moviesearch收藏集中。

class Movieseat.Views.Searchresult extends Backbone.View

  template: JST['movieseats/searchresult']

  render: -> 
    $(@el).html(@template(movie: @collection))
    this

在我渲染的模板中，我有以下代码，

Movie result template

<% for movie in @movie.results : %> 
    <li><%= movie.original_title %></li> 
<% end %>

但是当呈现模板时，我得到一个错误。

Uncaught TypeError: Cannot read property 'results' of undefined
    (anonymous function) 
    (anonymous function) 
    JST.movieseats/searchresult 
    Movieseat.Views.Searchresult.Searchresult.render 
    Movieseat.Views.Moviesearch.Moviesearch.doSearch 
    jQuery.event.dispatch 
    elemData.handle

我是否正确地认为将searchresult视图与moviesearch集合相关联会出现问题？

Answer 1

您需要执行@template(@collection)而不是@template()

Answer 2

我不知道coffeescript，所以我将用javascript编写。

有几件事：

首先，默认情况下，集合获取是异步的，因此仅在获取完成后才呈现视图。

this.collection.fetch().done(function(){
    view = new Movieseat.Views.Searchresult()
    $('#movies').append(view.render().el)
});

其次，将集合传递给视图

view = new Movieseat.Views.Searchresult({collection:collection});

三，保存收藏参考

Movieseat.Views.Searchresult = Backbone.view.extend({
  initialize:function(opts){
    this.collection = opts.collection;
  }
});