Question

我创建了一个使用输入字段呈现模板的视图。当文本被输入到inputfield中时，它会激活一个事件，该事件会创建一个新的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写。

有几件事：

首先，Collection fetch默认是异步的，所以只有在fetch完成时才渲染视图。

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;
  }
});

将视图连接到Backbone中的集合

2 个答案: