一個簡單的例子 - Backbone.js教程 - 基於JSON + Collection的視圖

我嘗試this教程。一個簡單的例子 - Backbone.js教程 - 基於JSON + Collection的視圖

的HTML是（的index.html）：在瀏覽器中顯示

{ 
    { 
     "name" : "AAAA", 
     "title" : "BBBB", 
     "background" : "CCCC" 
    }, 
    { 
     "name" : "DDDD", 
     "title" : "EEEE", 
     "background" : "FFFF" 
    }, 
    { 
     "name" : "GGGG", 
     "title" : "HHHH", 
     "background" : "IIII" 
    } 
}

但沒有：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="jquery.js"></script> 
    <script src="json2.min.js"></script> 
    <script src="underscore.js"></script> 
    <script src="backbone.js"></script> 
    <script> 

     $(function() { 
      var Profile = Backbone.Model.extend(); 

      var ProfileList = Backbone.Collection.extend({ 
       model: Profile, 
       url: 'jsonSample.json' 
      }); 

      var ProfileView = Backbone.View.extend({ 
       el: "#profiles", 
       template: _.template($('#profileTemplate').html()), 
       render: function (eventName) { 
        _.each(this.model.models, function (profile) { 
         var profileTemplate = this.template(profile.toJSON()); 
         $(this.el).append(profileTemplate); 
        }, this); 

        return this; 
       } 
      }); 

      var profiles = new ProfileList(); 
      var profilesView = new ProfileView({ model: profiles }); 
      profiles.fetch(); 
      profiles.bind('reset', function() { 
       profilesView.render(); 
      }); 

     }); 
    </script> 
    <title>Fortified Studio</title> 
</head> 
<body> 
    <div id="profiles"></div> 

    <script id="profileTemplate" type="text/template"> 
     <div class="profile"> 
      <div class="info"> 
       <div class="name"> 
        <%= name %> 
       </div> 
       <div class="title"> 
        <%= title %> 
       </div> 
       <div class="background"> 
        <%= background %> 
       </div> 
      </div> 
     </div> 
    </script> 
</body> 
</html>

jsonSample.json。這裏有什麼問題？

來源

2014-02-23 URL87

我對骨幹沒有太多的經驗，但是你的JSON文件裏面包含了一個哈希值和其他哈希值，不應該是一個包含哈希值的數組嗎？ – htatche

@htatche：你說得對，現在json文件格式正確，但我仍然有同樣的問題。 – URL87

另外，一旦你解決這個問題，你需要打印一個集合，所以你必須遍歷它像'事端<％_.each（項目函數（項目，重點，編曲）{<%= item %>}）; ％>' – htatche

編輯2：

這裏是一個對的jsfiddle工作版本：http://jsfiddle.net/8RP89/1/

我建議你找一個不同的教程。這一個看起來真的很好，我不得不做一些改變才能使事情順利進行。儘管如此，我不會將我的示例用作未來代碼的模板。我做了足夠的努力來確保它的工作。

我沒有測試的一件事實際上是加載JSON文件。不知道如何在jsFiddle中做到這一點。

這裏的變化AA快速概覽我做：

首先，我認爲reset事件不再呼籲fetch，除非您特別要求復位被叫做取：

profiles.bind('reset', function() { 
    profilesView.render(); 
});

相反，最好在初始化期間在您的視圖中收聽add事件。例如：

initialize: function(){ 
    this.listenTo(this.collection,"add", this.renderItem);   
},

現在因爲add事件被稱爲對每個項目增加，需要添加的方法來使物品單獨

renderItem: function(profile) { 
    var profileTemplate = this.template(profile.toJSON()); 
    this.$el.append(profileTemplate);   
}

以上，如果你在有要素已經不起作用因此您需要添加渲染方法來處理現有的集合元素：

render: function() { 
    this.collection.each(function(model){ 
     var profileTemplate = this.template(model.toJSON()); 
     this.$el.append(profileTemplate); 
    }, this);   
    return this; 
},

現在，您必須在創建視圖後明確調用渲染：

var profilesView = new ProfileView({ collection: profileList }); 
profilesView.render();

編輯1：

你可能想改變這兩條線使用集合，而不是模型。默認情況下，可以使用this.collection在Backbone Views中訪問集合對象。本教程中的語法看起來完全錯誤。我從來沒有見過this.model.models。也許這是Backbone的老版本。

var profilesView = new ProfileView({ collection: profiles });

和這條線的位置：

_.each(this.collection, function (profile) {

你必須顯示代碼：

_.each(this.model.models, function (profile) {

和：

var profilesView = new ProfileView({ model: profiles });

而且我可能會改變你的JSON文件使用數組：

[ 
    { 
     "id": "p1", 
     "name" : "AAAA", 
     "title" : "BBBB", 
     "background" : "CCCC" 
    { 
     "id": "p2", 
     "name" : "DDDD", 
     "title" : "EEEE", 
     "background" : "FFFF" 
    }, 
    { 
     "id": "p3", 
     "name" : "GGGG", 
     "title" : "HHHH", 
     "background" : "IIII" 
    } 
]

來源

2014-02-23 22:13:15 Gohn67

您的更改似乎正確，但我仍然沒有在瀏覽器中獲得任何內容，它是否適合您？ – URL87

是的，我正在爲你的jsFiddle工作。我發現了更多的錯誤。 – Gohn67

你能在這裏分享嗎？ – URL87

一個簡單的例子 - Backbone.js教程 - 基於JSON + Collection的視圖

回答

相關問題