Question

我正在尝试使用骨干在页脚中实现菜单，其中菜单中的五个项目中只有一个可以保持活动状态。以下是我写的代码：

模型

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。这与'this'有什么关系吗？

Backbone.js不能通过视图更改模型的属性

0 个答案: