渲染JSON數據，我周圍看了噸Backbone.js的模板

，並不能找到答案這個問題。我正在嘗試使用本地JSON文件，使用Backbone.js加載它並將其呈現給瀏覽器中的模板。我的文件下載，模板出現，但它永遠不會被數據填充。有什麼想法嗎？提前致謝。渲染JSON數據，我周圍看了噸Backbone.js的模板

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>People list</title> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> 
</head> 
<body> 


    <div class="container"> 
    <h1>People list</h1> 
    <hr /> 
    <div class="page"></div> 
    </div> 


    <script type="text/template" id="people-template"> 

    <table class="table striped"> 
     <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Age</th> 
      <th>Photo</th> 
      <th>Video</th> 
     </tr> 
     </thead> 
     <tbody> 
     <% _.each(PersonCollection, function(Person) { %> 
      <tr> 
      <td><%= Person.get("firstName") %></td> 
      <td><%= Person.get("lastName") %></td> 
      <td><%= Person.get("age") %></td> 
      <td><%= Person.get("photo") %></td> 
      <td><%= Person.get("video") %></td> 
      </tr> 
     <% }); %> 

     </tbody> 
    </table> 
    </script> 

    </body> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

JAVASCRIPT

<script> 

    // MODEL MODEL MODEL 
    // MODEL MODEL MODEL 

    var Person = Backbone.Model; 

    // COLLECTION COLLECTION COLLECTION 
    // COLLECTION COLLECTION COLLECTION 

    var PersonCollection = Backbone.Collection.extend({ 
     model: Person, 
     url: '/people.json', 
     parse: function (response) { 
     return response 
} 
    }); 

    // VIEWS VIEWS VIEWS 
    // VIEWS VIEWS VIEWS 

    var About = Backbone.View.extend ({ 
     el: '.page', 
     render: function() { 
     var that = this; 
     var people = new PersonCollection(); 
     people.fetch({ 
      success: function (PersonCollection) { 
      var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models}); 
      that.$el.html(template); 
      } 
     }) 
     } 
    }); 


    var About = new About(); 

    // ROUTES ROUTES ROUTES 
    // ROUTES ROUTES ROUTES  

    var Router = Backbone.Router.extend({ 
     routes: { 
     '': 'home' 
     } 
    }); 

    var router = new Router(); 
    router.on('route:home', function() { 
     About.render(); 
    }); 

    Backbone.history.start(); 

    </script>

JSON再次取樣

{ 
    "people": [ 
    { 
     "firstName": "Jane", 
     "lastName": "Doe", 
     "age": "32", 
     "photo": "test_photo", 
     "video": "test_video" 
    }, 
    { 
     "firstName": "James", 
     "lastName": "Hamm", 
     "age": "56", 
     "photo": "test_photo", 
     "video": "test_video" 
    },

謝謝了Ÿ建議。我是新來的stackoverflow（發佈第一個問題），讓我知道如果我需要提供更多的信息。

來源

2013-05-19 xEmptyCanx

也許你應該解決JSON數據，嘗試刪除'「人」'，只留下數組對象。 – vadimrostok

哇！那就是訣竅。非常感謝！ – xEmptyCanx

如果不wan't修改您的JSON文件，你可以在你的PersonCollection改變解析函數返回你的人數組。例如：

var PersonCollection = Backbone.Collection.extend({ 
    model: Person, 
    url: '/people.json', 
    parse: function (response) { 
     // Return people object which is the array from response 
     return response.people 
    } 
});

骨幹文檔：每當一個模型的數據由服務器返回，在獲取和保存http://backbonejs.org/#Model-parse

解析被調用。該函數傳遞原始響應對象，並返回要在模型上設置的屬性哈希值。該默認實現是一個空操作，只需通過JSON 響應。如果您需要使用預先存在的API，或者更好地命名您的響應，請將其覆蓋。

來源

2013-09-23 11:19:47

U可以直接與您的收藏填充JSON數據。集合將負責根據JSON對象數組填充數據。在你的情況，如果你不希望改變JSON數據，也就是說，如果你想保持「人」的屬性，因爲它是，你可以通過backbone-relational.js填充所有數據。它有助於處理嵌套的JSON數據。

來源

2014-04-05 07:44:46

渲染JSON數據，我周圍看了噸Backbone.js的模板

回答

相關問題