2012-06-12 5 views
1

현재 스크린 캐스트 튜토리얼을 통해 backbone.js를 배우고 있습니다. 코드가 작동을 멈추고 Chrome의 javascript 콘솔에 Cannot call method 'bind' of undefined 오류가 발생합니다.backbonejs : 정의되지 않은 'bind'메서드를 호출 할 수 없습니다.

window.PlaylistView = Backbone.View.extend({ 
    tag: 'section', 
    className: 'playlist', 

    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.template = _.template($('#playlist-template').html()); 
     this.collection.bind('reset', this.render); //<<<<<< THIS LINE 

     this.player = this.options.player; 
     this.library = this.options.library; 
    }, 

    render: function() { 
     $(this.el).html(this.template(this.player.toJSON())); 

     this.$('button.play').toggle(this.player.isStopped()); 
     this.$('button.pause').toggle(this.player.isPlaying()); 

     return this; 
    } 
}); 

내가보기 컬렉션이 않는 이유 this.collection 수단, 모델 컬렉션되지 않습니다 모르는 : 에러가 발생한 라인은 initialize 기능에 포함? 다른보기에서 사용 된 this.collection.bind()은 오류를 발생시키지 않았습니다. this.collection.trigger('select', this.model);을 호출하고 window.AlbumView을 확장하는 window.LibraryAlbumView에는 아무런 정의가없는 컬렉션이 window.AlbumView에 표시되지만 오류는 발생하지 않습니다. 이것은 나를 혼란스럽게합니다.

JSFIDDLE

편집 : 대신

window.Player = Backbone.Model.extend({ 
     defaults: { 
      'currentAlbumIndex': 0, 
      'currentTrackIndex': 0, 
      'state': 'stop' 
     }, 

     initialize: function() { 
      this.playlist = new Playlist(); 
     }, 

내가에 대해 참조 이전에 또한

window.Player = Backbone.Model.extend({ 
     defaults: { 
      'currentAlbumIndex': 0, 
      'currentTrackIndex': 0, 
      'state': 'stop' 
     }, 

     initialize: function() { 
      playlist = new Playlist(); // <<< this line changed! 
     }, 

this.collection 있었기 때문에

오류가 수정되었습니다 뷰는 모델 또는 모델의 컬렉션에 포함 된 데이터를 표시하기위한 의미가 있기 때문에 여기에 수집,

window.BackboneTunes = Backbone.Router.extend({ 
    routes: { 
     '': 'home', 
     'blank': 'blank' 
    }, 

    initialize: function() { 
     this.playlistView = new PlaylistView({ 
      collection: window.player.playlist, // <<<< THIS ONE! 
      player: window.player, 
      library: window.library 
     }); 

     this.libraryView = new LibraryView({ 
      collection: window.library 
     }); 
    }, 

답변

3

백본보기는 수집 또는 모델을 포함하고있다.

이 예제는 this.collection이 아직 정의되지 않았기 때문에 오류가 발생합니다. 그렇게하려면 컬렉션을 초기화 한 다음보기에 전달해야합니다.

new PlayListView({collection: someCollection});

+0

덕분에, 나는 당신의 응답을 따라 원래의 게시물에 업데이트되는 오류를 해결했다. 'this.playlist = new Playlist();'this.playlist'와'playlist'의 차이점은 무엇입니까? 'playlist'는 전역 적으로 전역 적이면 모든 객체가'playlist'에 접근 할 수 있기 때문에 왜 오류가 발생합니까? – Nyxynyx

+0

javascript'this'는 보통 당신이 기대하는 바가 아닙니다. 따라서 모든 뷰 및 컬렉션 초기화 메소드에서 underscore.js의'_.bindAll (this, 'methodname', 'methodname2', ...) 메소드를 사용하여 콜렉션 또는 뷰의 메소드에 바인드해야합니다. 'this.playlist'를 사용하면 재생 목록을'window.player'의 일부로 선언 했으므로'window.player.playlist'를 사용하여 액세스 할 수 있습니다 – jakee

+0

좋아, 지금 고마워! – Nyxynyx

관련 문제