2
目標是建立一個用戶界面來選擇一件T恤的品牌，尺寸和顏色。並非所有顏色都適用於所有尺寸，並且並非所有尺寸/顏色都適用於每種顏色。我的第一個骨幹模型/視圖。我在正確的軌道上嗎？
所以基本的用戶界面是三個選擇要素，尺寸和顏色的元素。
在閱讀了大量教程之後，我開始爲Make，Size和Color創建模型，併爲每個創建，製作尺寸，顏色和視圖以及代碼連接它們。我腦海。
第二次嘗試就在這裏，我創建了一個「Confg」模型和一個「Config」視圖。該模型作爲當前品牌，尺寸和顏色的屬性，以及當前可選品牌，型號和顏色的屬性。
難道你是一個經驗豐富的backbone.js專家嗎？
這是模型。基本上，我「手動」處理在setMake方法中獲取正確的大小/顏色，並在setSize方法中更正顏色，然後在模型上設置必要的更改。
var design_id = 2; // set server-side
var ConfigModel = Backbone.Model.extend({
initialize: function(){
this.baseUrl = "/designs/" + design_id + "/configure/";
},
setMake: function(make_id){
var me = this;
var make = _.find(this.get("makes"), function(el){
return el.id == make_id });
// aggregate changes to the model:
var changes = {
"make": make
};
// get current make/size/color:
var cur_make_id = make.id;
var cur_size_id = this.get("size").id;
var cur_color_id = this.get("color").id;
// get sizes for the current make:
$.getJSON(me.baseUrl + "makes/" + cur_make_id + "/sizes/",
function(data){
changes.sizes = data;
if(!_.find(data, function(el){
return el.id == cur_size_id })){
// the currently selected size is not available,
// so use the first size
changes.size = data[0];
cur_size_id = changes.size.id;
}
// and get the colors for the current make and size:
$.getJSON(me.baseUrl + "makes/" + cur_make_id
+ "/sizes/" + cur_size_id + "/colors/",
function(data){
changes.colors = data;
if(!_.find(data,
function(el){
return el.id == cur_color_id })){
// the currently selected color
// is not available,
//so use the first one in the list
changes.color = data[0];
}
me.set(changes);
});
});
},
setSize: function(size_id){
// retrieve colors for the new size
var me = this;
var size = _.find(this.get("sizes"),
function(el){ return el.id == size_id });
var changes = {
"size": size
};
var cur_make_id = this.get("make").id;
var cur_size_id = size.id;
var cur_color_id = this.get("color").id;
$.getJSON(me.baseUrl + "makes/" + cur_make_id +
"/sizes/" + cur_size_id + "/colors/",
function(data){
changes.colors = data;
if(!_.find(data,
function(el){
return el.id == cur_color_id })){
changes.color = data[0];
}
me.set(changes);
});
},
setColor: function(color_id){
var color = _.find(this.get("colors"),
function(el){
return el.id == color_id });
this.set({"color": color});
}
});
這裏是模型實例。初始默認設置爲服務器端：
var Config = new ConfigModel({
design_id: 2,
make: {"id": 1, "name": "Men's Organic Cotton Tee"},
size: {"id": 4, "name": "L"},
color: {"id": 2, "name": "Black"},
makes: [{"id": 2, "name": "Women's Organic Cotton Tee"},
{"id": 1, "name": "Men's Organic Cotton Tee"}],
sizes: [{"id": 2, "name": "S"},
{"id": 3, "name": "M"},
{"id": 4, "name": "L"}],
colors: [{"id": 2, "name": "Black"},
{"id": 3, "name": "red"}]
});
而這裏是視圖。我覺得這是非常簡單明瞭..結合來改變事件的選擇元素，並調用setMake或上的setSize模型，然後偵聽來自模型的更改事件：
var ConfigView = Backbone.View.extend({
el: $("#config"),
optionsTemplate: _.template($("#options-template").html()),
events:{
"change #make select": "onChangeMake",
"change #size select": "onChangeSize",
"change #color select": "onChangeColor"
},
initialize: function(){
Config.bind("change:makes", this.updateMakes, this);
Config.bind("change:sizes", this.updateSizes, this);
Config.bind("change:colors", this.updateColors, this);
},
render: function(){
//console.log("ConfigureView.render");
this.updateSelect("make");
this.updateSelect("size");
this.updateSelect("color");
},
updateMakes: function(){
this.updateSelect("make");
},
updateSizes: function(){
this.updateSelect("size");
},
updateColors: function(){
this.updateSelect("color");
},
updateSelect: function(which){
// updates the select specified by "which"
this.$("#" + which + " select").html(this.optionsTemplate({
chosen:Config.get(which),
options:Config.get(which + "s")
}));
},
onChangeMake: function(){
Config.setMake(this.$("#make select").val());
},
onChangeSize: function(){
Config.setSize(this.$("#size select").val());
},
onChangeColor: function(){
Config.setColor(this.$("#color select").val());
}
});
var app = new ConfigView();
app.render();
可能我建議與變量名稱保持一致性？在你的'ConfigModel.setMake（）'函數中，你開始使用下劃線，但是你在任何其他地方使用下劃線。 – Cobby 2012-02-21 03:06:44