0

バックボーンを使用してフッターにメニューを実装しようとしていますが、メニューの 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 に設定できませんでした。これは「これ」と何か関係がありますか?

4

0 に答える 0