使用骨幹的車把中的迭代

我正在使用骨幹和車把來模板化，我對此很陌生。我目前的json是在下面的格式和代碼工作正常。使用骨幹的車把中的迭代

[ 
    { 
    "id": "10", 
    "info": { 
     "name": "data10" 
    } 
    }, 
    { 
    "id": "11", 
    "info": { 
     "name": "data11" 
    } 
    } 

]

但是，當我改變我的json結構到如下所示的東西，我有困難讓事情被填充。

{ 
"total_count": "10", 
"dataElements": [ 
    { 
     "id": "10", 
     "info": { 
      "name": "data10" 
     } 
    }, 
    { 
     "id": "11", 
     "info": { 
      "name": "data11" 
     } 
    } 
] 
}

如何填充名稱，信息和total_count保持當前的代碼結構？

的jsfiddle：http://jsfiddle.net/KTj2K/1/

任何幫助真的appriciated。

來源

2012-10-14 user1184100

你需要做的一些事情才能奏效。

使用定製的核心替換您的集合的Backbone核心「重置」，該定製理解您傳遞給它的數據。例如：

reset: function (data) { 
    this.totalCount = data.total_count; 
    Backbone.Collection.prototype.reset.call(this, data.dataElements); 
}

現在，當您重置您的收藏，它會拉出來TOTAL_COUNT你與重置它的對象，並使用骨幹核心復位與dataElement陣列。請記住，如果你打算從服務器上獲取這個信息，你可能需要用'parse'來做類似的事情。

我建議（如果你的例子看起來像你正在使用的真正的代碼），你在重新渲染之前重置你的集合。

var dataCollectionList = new dataCollection(); 
dataCollectionList.reset(jsonData); 
var App = new AppView({model : dataCollectionList});

現在，在您看來的「渲染」的方法，你可以抓住的 'TOTALCOUNT' 屬性可收集 -

render : function() { 
    //Should spit the total count into the element, just as an example 
    this.$el.append(this.model.totalCount); 
    //or console.log it 
    console.log(this.model.totalCount); 
    return this; 
}

瞧。附註 - 作爲一個和Backbone一起工作的人，當人們設置一個類似於「model」的屬性（例如peopleModel，itemModel等等）並且它最終成爲一個骨幹網集合時，這會讓我感到非常緊張。將其命名得更清楚 - 儘管一些MVC純粹主義者可能會有點不同意。

而且，在此代碼塊：

_.each(this.model.models, function (myData) { 
      $(this.el).append(new ItemView({model:myData}).render().el); 
     }, this);

你不需要做_.each(this.model.models.......)。由於您使用的是集合，因此該集合具有內置的「每個」方法。

this.model.each(function (myData) { ..... } , this);

很清潔。

來源

2012-10-14 05:32:50 Stephen

我不是一個MVC純粹主義者會使用骨幹。和大多數純粹主義者一樣，歡迎他們坐在角落裏，憤怒地嘀咕自己，而我們其他人完成一些工作:)並且骨幹視圖處理['collection'選項]（http：// backbonejs。 org /＃View-constructor），就像'model'選項一樣，所以確實應該是'this.collection'和'new View（{collection：...}）'。 –

謝謝斯蒂芬的評論 – user1184100

使用骨幹的車把中的迭代

回答

相關問題