2
目標は、Tシャツのメイク、サイズ、色を選択するためのUIを構築することです。すべての色がすべてのサイズで使用できるわけではなく、すべてのサイズ/色がすべてのメイクで使用できるわけではありません。私の最初のバックボーンモデル/ビュー。正しい軌道にいるのですか？
基本的なUIは、make、size、colorの3つの選択要素です。
チュートリアルを読み終えたら、メイク、サイズ、カラーのモデルを作成し、メイク、サイズ、色、ビューのコレクションを作成し、それらを接続するコードを作成しました。私の気持ち。
ここでは、1つの "Confg"モデルと1つの "Config"ビューを作成しました。現在のメイク、サイズ、色の属性としてのモデル、現在選択可能なメーカー、モデル、および色の属性。
これは、あなたが熟練したバックボーンである方法ですか.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"}]
});
ここに表示されます。私は、これはかなりstraighforwardだと思います。..バインドを選択要素のイベントを変更し、モデルに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