Backbonejs - 我如何初始化視圖？

-1

不知怎的，當我初始化我的看法，我得到一個錯誤Uncaught TypeError: Cannot read property 'toJSON' of undefinedBackbonejs - 我如何初始化視圖？

我有以下代碼：

//Model 
var Song = Backbone.Model.extend({ 
     defaults: { 
      title: 'Red', 
      artist: 'Taylor Swift', 
      filename: 'audio1.mp3', 
      playlist: 0 
     }, 

}); 

//Collection 
var Playlist = Backbone.Collection.extend({ 
    model: Song, 
    localStorage: new Backbone.LocalStorage('playlist'), 
    initialize: function(models,options) { 
     _.extend(this,_.pick(options, 'currentTrack')); 
     this.fetch({ajaxSync: true}) 
    }, 
    url: 'metadata', 
    parse: function(response){ 
     return response 
    }, 
    currentTrack: 0, 
    currentTime: 0 
}); 

//View 
var Player = Backbone.View.extend({ 
     tagName: "audio", 
     id: "player", 
     model: playlist, 
     currentSong: function(){ 
      console.log(this.model); 
      return this.model.at(this.model.currentTrack).toJSON(); 
     }, 
     events: { 
      'ended': 'next', 
      'pause': 'saveTime' 
     }, 
     newTemplate: _.template('<source src="<%= filename %>" >'), 
     initialize: function(){ 
      this.render(); 
     }, 
     render: function(){ 
      this.$el.html(this.newTemplate(this.currentSong())); 
      $(document.body).html(this.el); 
     }, 
     next: function(){ 
      if(this.model.length == this.model.currentTrack){ 
       console.log('End of the playlist'); 
      } 
      else{ 
      this.model.currentTrack++; 
      console.log('currentTrack: ', this.model.currentTrack); 
      this.render(); 
      this.el.src = this.currentSong().filename; 
      this.el.play(); 
      } 
     }, 
     saveTime: function(){ 
      console.log('Saving currentTime:', this.el.currentTime); 
      this.model.currentTime = this.el.currentTime; 
     } 
}); 


var playlist = new Playlist(); 
var player = new Player({model: playlist});

不知怎的，當我初始化player查看playlist colleciton尚未填充呢。我可以從控制檯運行var player = new Player({model: playlist})。

來源

2017-06-21 medicengonzo

您很可能需要監聽收集事件並渲染視圖。如果你調試，什麼變量是未定義的？另外，'playlist'是一個集合，所以它應該是'collection：playlist' – vassiliskrikonis

這是this.model返回undefined – medicengonzo

'model：playlist，'在視圖屬性中（在'extend'中）沒用。這是一個應該在實例化時傳遞的選項，就像你在底部一樣。 –

你的收藏是空的。所以this.model.at(this.model.currentTrack);這實際上是this.collection.at(0);將返回undefined。因此你正在執行undefined.toJSON()。

您需要在此處放置空檢查並等待渲染前獲取集合數據。

而且這是一個好主意，通過集合作爲collection而不是model

來源

2017-06-21 09:09:31

是的，它一開始是空的，但我用來自服務器的數據使用獲取來填充它。應該在哪裏調用獲取方法？ – medicengonzo

或者我怎麼能告訴currentSong（）方法等待提取的數據？ – medicengonzo

@medicengonzo'this.fetch（{success：function（）{this.render（）;}}）'或'this.fetch（）。then（function（）{this.render（）;}）'或者你可以設置一個偵聽器來「同步」事件，並將'render'設置爲回調 –

我找到了答案！渲染之前，我必須等待集合中獲取爲T J said

他說，使用

this.fetch({success: function(){ this.render }})

或

this.fetch().then(function(){ this.render });

但最終我

this.fetch().done(function(){ this.render() });

做到了

來源

2017-06-21 14:29:51 medicengonzo

Backbonejs - 我如何初始化視圖？

回答

相關問題