それで、今日初めて backbone.js を調べ始めました。私が夢中になって取り組んでいることの 1 つは、モデル プロパティを便利なコントロールにバインドすることです。私の質問は、個々のモデル プロパティをコントロールにバインドする方法です。
無視するプロパティを選択して、任意のモデルのコレクションをテーブルにバインドできるこの例を思いつきましたが、これについては正しい道を進んでいないと感じています。最終的にはこれを拡張して、テーブルをデータ グリッドのように編集可能にするという考えです。これを JSFiddle @ http://jsfiddle.net/yqjvK/に追加しました
ヘルパー関数を使用して、モデルのテンプレートを生成します。これは、テーブルのヘッダーと行データを生成するために使用されます
//helper function to loop through a model's attributes choosing which to ignore
function LoopAtts(model,func,ignore){
//calls func on each unignored model attribute
}
これは、例を説明するために使用する基本的なモデルです
var Person = Backbone.Model.extend({
defaults: function() {
return {
firstName: "N/A",
lastName:"N/A",
score:function(){
return 0;
}
};
},
});
これは、モデルのセル データを出力するために使用するビューです。プロパティが変更されたときにリッスンし、今のところ、html を更新された値に設定するだけです。
var RowView = Backbone.View.extend({
tagName: "tr",
className: "rowView",
initialize: function() {
var cells = LoopAtts(this.model,CellTemplate,this.options.ignore);
this.listenTo(this.model, "change", this.change);
this.$el.html(_.template(cells)(this.model.attributes));
},
change:function(e){
console.log(e);
for(p in e.changed)
{
if(e.changed.hasOwnProperty(p))
{
//handle update of cell
this.$el.find("#"+p).html(this.model.attributes[p]);
}
}
}
});
これはコレクションにバインドするために使用するビューで、要素がコレクションに追加されるときに rowViews を追加します。
var TableView = Backbone.View.extend({
defaults: {noData:'<tr><td>No Data</td></tr>'},
tagName: "table",
firstTime: true,
initialize: function() {
this.listenTo(People, 'add', this.addOne);
this.listenTo(People, 'reset', this.addAll);
this.$el.html(this.noData);
},
addOne: function(o) {
//singleton for table data
if(this.firstTime)
{
var headers = LoopAtts(o,HeaderTemplate,this.options.ignore)
this.$el.html(_.template(headers)(o.attributes));
this.firstTime = false;
}
//assign view to model and append it to the table
var view = new RowView({model: o,ignore:this.options.ignore});
this.$el.append(view.render().el);
},
addAll: function() {
this.model.models.each(this.addOne, this);
}
})