骨幹 - 裝載JSON到集合將不會在視圖

我似乎無法得到JSON被加載到我的FriendsCollection渲染成FriendListView渲染。我可以看到它通過網絡面板加載，並且可以將數據記錄到控制檯，但由於某些原因，fetch命令未將數據傳遞到要呈現的視圖。骨幹 - 裝載JSON到集合將不會在視圖

我使用骨幹1.0。

我使用的代碼可以在這裏jsbin：http://jsbin.com/OHePaki/1/edit?html,js,output

// MODELS 
var ArtifactModel = Backbone.Model.extend({ 
    initialize: function() { 
     this.on('reset', function(){ artifactView.render() }) 
    }, 
    defaults: { 
     "text": "Unknown Text", 
     "timestamp": "Unknown timestamp" 
    } 
}); 
var artifactModel = new ArtifactModel(); 

// COLLECTIONS 
var ArtifactCollection = Backbone.Collection.extend({ 
    model: ArtifactModel, 
    url: '/getDigest.json', 
    // url: 'http://we365.local/Artifact/GetShareableArtifact?token=b88d2640826bb8593f6edb308ce604f28225f240&artifact_id=2&social_site=tw&log_inside=&go', 
    parse: function(data) { 
     console.log('running parse'); 
     return _.map(data.response.content, _.identity); 
    }, 
    initialize: function(){ 
     this.on('reset', function(){ artifactListView.render(); }), 
     console.log('running init function for ArtifactCollection'); 
     this.fetch(); 
     //this.reset(artifactjson, { parse: true }); 
     console.log(this.toJSON()); 
    } 
}); 
var artifactCollection = new ArtifactCollection(); 


// VIEWS 
    var ArtifactView = Backbone.View.extend({ 
     tagName: 'li', 
     className: 'single-model', 
     render: function(){ 
      var template = Handlebars.compile($('#stream_getDigest').html()); 
      this.$el.html(template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    var ArtifactListView = Backbone.View.extend({ 
     initalize: function(){ 
      this.collection.on('add', this.addOne, this); 
     }, 
     render: function(){ 
      this.collection.forEach(this.addOne, this); 
     }, 
     addOne: function(artifactModel){ 
      var artifactView = new ArtifactView({model: artifactModel}); 
      this.$el.append(artifactView.render().el); 
     } 
    }); 


// rendering 
var artifactView = new ArtifactView({model: artifactModel}); 
var artifactListView = new ArtifactListView({collection: artifactCollection}); 

artifactView.render(); 
artifactListView.render(); 

$('#list').html(artifactListView.$el.html());

來源

2013-08-25 flashpunk

默認情況下，jQuery的Ajax調用是異步的，代碼將繼續運行，而無需等待.fetch()要完蛋。在您的代碼中，view在收集準備就緒之前呈現，因此view的數據爲空。

你可以通過jQuery的AJAX選項fetch功能，所以你可以做以下（http://backbonejs.org/#Collection-fetch）：

... 
initialize: function(){ 
    this.on('reset', function(){ artifactListView.render(); }), 
    console.log('running init function for ArtifactCollection'); 
    this.fetch({async:false}); 
    console.log(this.toJSON()); //This will log the loaded collection 
} 
...

也可以更改抓取策略採取異步加載的優點：

this.fetch().done(function(){ 
    //Things to do after collection is loaded 
}); 
//this's not good to use in init function

來源

2013-08-26 05:13:29 BMH

謝謝@BMH，這實際上很有意義。雖然我無法相信我沒有發現任何可能是問題的地方。再次感謝！ – flashpunk

這是正確的嗎？我知道（默認情況下）代碼在不等待AJAX響應的情況下繼續運行，但是我認爲'reset'事件在模型更新後被觸發，而不是在請求發送後立即觸發。在這種情況下，它應該沒有'{async：false}'位。 –

@DavidKnipe是的，它可以使用'this.fetch（{reset：true}）;'，但你可能需要調用'$（'＃list'）。html（artifactListView。$ el.html（））; '再次看到它在瀏覽器中生效。 – BMH

您需要在模型設定處理程序。事情是這樣的：

friendModel.on('change', function() { friendView.render(); }); 
friendCollection.on('change', function() { friendListView.render(); });

或者更好的是，擺在建設者這些線friendModel和friendCollection（見http://backbonejs.org/#View-constructor）。

來源

2013-08-25 22:52:26

我已經將上面的代碼更新爲我認爲你所建議的內容。我已經爲模型和集合添加了初始化方法，但沒有這樣的運氣。 – flashpunk

我不瞭解集合，但對於模型，事件應該是「變化」，而不是「重置」。另外，現在的方式是，視圖'artifactListView'沒有永久地附加到HTML元素。你得到的只是最後一行，它只是讀取視圖的內容並將其複製到元素。 'ArtifactView'中有'tagName';你應該在'ArtifactListView'中做類似的事情，而不是使用最後一行。我看不到任何其他錯誤...所以它看起來像兩個意見因爲完全不同的原因而失敗。 –

我不應該得到某種錯誤或某事告訴我什麼是錯誤的？我一直試圖讓這個Json的讀數小時，由於某種原因，它只是將無法正常工作。我已經嘗試了幾種不同的方法。 – flashpunk

骨幹 - 裝載JSON到集合將不會在視圖

回答

相關問題