バックボーンを使用してフッターにメニューを実装しようとしていますが、メニューの 5 つの項目のうち 1 つだけをアクティブにできます。以下は私が書いたコードです:
モデル
var Footer = Backbone.Model.extend({
defaults:{
title:'intro',
message:'Welcome',
active: false
},
activate: function(){
this.set({'active':true});
},
deactivate: function(){
this.set({'active':false});
},
});
モデルのインスタンス
footer1 = new Footer({
title:'intro',
message:'Welcome',
active : true,
});
footer2 = new Footer({
title:'photos',
message:'Photos',
active : false,
});
footer3 = new Footer({
title:'news',
message:'News',
active : false,
});
footer4 = new Footer({
title:'Blog',
message:'Blog',
active : false,
});
footer5 = new Footer({
title:'FAQ',
message:'FAQ',
active : false,
});
コレクション
var Footerlist = Backbone.Collection.extend({
model: Footer,
});
var footerlist1 = new Footerlist([footer1, footer2, footer3, footer4, footer5]);
各項目の見方
var FooterView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#footer-template').html()),
events: {
'click span': 'activate'
},
initialize: function(){
this.model.on('change', this.render, this);
},
activate: function(){
footerlist1.each(this.deactivate, this);
this.model.set({'active':true})
},
deactivate: function(){
this.model.set({'active':false})
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this.$el
},
edit: function() {
this.$el.addClass("editing");
},
});
すべてのアイテムのビュー
var FootersView = Backbone.View.extend({
el: $("#here"),
initialize: function(){
this.addAll();
},
addOne: function(footer) {
var view = new FooterView({model: footer});
$("#here").append(view.render());
},
addAll: function() {
footerlist1.each(this.addOne, this);
},
});
var show = new FootersView;
フッター項目がクリックされるたびにわかるように、すべての項目のアクティブなプロパティを false に設定し、クリックされた項目のプロパティを true に設定します。しかし、これはうまくいきませんでした。残りの項目のアクティブ プロパティを false に設定できませんでした。これは「これ」と何か関係がありますか?