Wednesday, 15 July 2015

javascript - Connect view to collection in Backbone -



javascript - Connect view to collection in Backbone -

i've created view renders template inputfield. when text gets typed inputfield activates event creates new view , append element that's beingness renderd in view.

class movieseat.views.moviesearch extends backbone.view template: jst['movieseats/moviesearch'] el: '#moviesearch' initialize: (opts) -> {@collection} = opts @render() homecoming render: -> $(@el).html(@template()) homecoming events: "keyup input": "dosearch" dosearch: (e) -> @collection.setquery $(e.currenttarget).val() @collection.fetch() view = new movieseat.views.searchresult() $('#movies').append(view.render().el)

if i'm right view , collection "linked" because of moviesearch name.

but searchresult view i'm using this. , think i'm not "linking" moviesearch collection.

class movieseat.views.searchresult extends backbone.view template: jst['movieseats/searchresult'] render: -> $(@el).html(@template(movie: @collection))

in template render have code,

movie result template <% film in @movie.results : %> <li><%= movie.original_title %></li> <% end %>

but when template gets rendered error.

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

am right think problem connecting the searchresult view moviesearch collection?

i don't know coffeescript, i'll write in javascript.

there couple of things :

first, collection fetch asynchronous default, render view when fetch has completed.

this.collection.fetch().done(function(){ view = new movieseat.views.searchresult() $('#movies').append(view.render().el) });

second, pass collection view

view = new movieseat.views.searchresult({collection:collection});

third, save collection reference

movieseat.views.searchresult = backbone.view.extend({ initialize:function(opts){ this.collection = opts.collection; } });

javascript backbone.js

No comments:

Post a Comment