2012-04-17 84 views
1

我正在閱讀構建酒窖應用程序的Backbone教程http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/。本教程的作者沒有清楚地解釋一點,我無法從文檔中找出它。也就是說,使用this.model.models,你在看呈現以下骨幹:使用「model.models」

window.WineListView = Backbone.View.extend({ 

    tagName:'ul', 

    initialize:function() { 
     this.model.bind("reset", this.render, this); 
    }, 

    render:function (eventName) { 
     _.each(this.model.models, function (wine) { 
      $(this.el).append(new WineListItemView({model:wine}).render().el); 
     }, this); 
     return this; 
    } 

}); 

功能視圖該視圖的模式實際上是一個集合

list:function() { 
     this.wineList = new WineCollection(); 
     this.wineListView = new WineListView({model:this.wineList}); 

和收集聲明葡萄酒作爲其模型

window.WineCollection = Backbone.Collection.extend({ 
    model:Wine, 
    url:"../api/wines" 
}); 

所以,當WineListView被實例化時,它實際上是this.model Wine List Collection。而且,從文檔,models可訪問的車型陣列集合

modelscollection.models 
Raw access to the JavaScript array of models inside of the collection. Usually you'll want to use get, at, or the Underscore methods to access model objects, but occasionally a direct reference to the array is desired. 

所以裏面如果this.model已經(被宣佈爲在視圖模型由於集合)葡萄酒的收藏,這是爲什麼有必要做this.model.models?從本質上再次獲得收藏?

+1

嗯。當視圖查看集合而不是單個對象時,主幹視圖具有'collection'屬性,應該使用'collection'屬性來代替'model'。 [其中一個評論](http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/#comment-27575)確實注意到這個問題,但在那裏沒有來自該教程的作者的迴應。 [Derick Bailey的](http://stackoverflow.com/users/93448/derick-bailey)博客帖子可能是一個更好的學習這個東西的地方。 – 2012-04-17 21:08:09

+0

@ muistooshort好的,謝謝,我沒有看到那個評論.. – Leahcim 2012-04-18 01:28:03

回答

1

看起來這實際上是一種文體選擇。該代碼

_.each(this.model.models, function (wine) { 
    $(this.el).append(...); 
}, this); 

只需通過集合中的模型迭代,並應相當於:

this.model.each(function (wine) { 
    $(this.el).append(...); 
}, this); 

我想到的第二個版本是更容易閱讀,但每次給他/她自己...

+0

我不知道教程作者是否使用視圖的'model'屬性來容納一個集合而不是使用'collection'來容納這個集合,從而使自己感到困惑。 – 2012-04-17 21:09:33

+0

@ muistooshort所以當作者看到時,他可以做到以下幾點?新視圖(collection:wine) – Leahcim 2012-04-18 01:27:02

+1

@Michael:是的,這將是一個更好的選擇,視圖構造函數處理[''collection''特別就像'model'](http://documentcloud.github.com/backbone/#查看構造函數)。然後你會說'this.collection.each(function(wine){...})';集合有[一些Underscore方法](http://documentcloud.github.com/backbone/#Collection-Underscore-Methods)已經混合,所以沒有必要說'_(this.collection).each(...) '或'_.each(this.collection,...)'。 – 2012-04-18 01:39:16

1

在我的情況下,要得到它的工作我必須做到以下幾點:

_.each(this.model.models, function (foto) { 
     console.log(foto.attributes); 
     $(this.el).append(new App.view.foto.foto({model:foto.attributes}).render().el); 
    }, this); 

不確定爲什麼accesing .attributes做的伎倆,我錯過任何轉換?

我從DB自舉以下JSON字符串:

[{ 
    "fid": 1, 
    "imagen": "sample_colors.jpg", 
    "width": "110", 
    "height": "110", 
    "dimension_id": 1, 
    "seccion_id": 1, 
    "estado": 0, 
    "fecha": { 
     "date": "2012-06-27 23:02:27", 
     "timezone_type": 2, 
     "timezone": "PDT" 
    } 
}, { 
    "fid": 2, 
    "imagen": "sample_colors.jpg", 
    "width": "110", 
    "height": "110", 
    "dimension_id": 1, 
    "seccion_id": 1, 
    "estado": 1, 
    "fecha": { 
     "date": "2012-06-27 12:03:02", 
     "timezone_type": 2, 
     "timezone": "PDT" 
    } 
}, { 
    "fid": 3, 
    "imagen": "sample_colors.jpg", 
    "width": "110", 
    "height": "110", 
    "dimension_id": 1, 
    "seccion_id": 1, 
    "estado": 2, 
    "fecha": { 
     "date": "2012-06-27 12:03:20", 
     "timezone_type": 2, 
     "timezone": "PDT" 
    } 
}]