Question

我有一组Backbone模型。我想将模型属性设置为“活动”，但要确保一次只能激活1个模型。我无法让这个工作，我正在寻找一些指导。

以下是我的代码的小提琴：http://jsfiddle.net/doen1mm9/

这是我的JavaScript和模板。

JS：

var data = [
    {
        "color": "blue",
        "name": "Johnny"
    },
    {
        "color": "green",
        "name": "Melissa"
    },
    {
        "color": "yellow",
        "name": "Bill"
    }
];

var TheModel = Backbone.Model.extend({
});

var TheCollection = Backbone.Collection.extend({
    model: TheModel,

    initialize: function() {
        this.on('change:isActive', this.ensureSingleActive, this);
    },

    ensureSingleActive: function(current) {
        var previous = this.findWhere({isActive: true});

        if (previous !== undefined) {
            previous.set('isActive', false);   
        }

        current.set('isActive', true);
    }
});

var ListView = Backbone.View.extend({
    el: '.js-container',

    tagName: 'ul',

    render: function() {
        this.collection.each(function(item) {
            var listItemView = new ListItemView({model: item});
            this.$el.append(listItemView.el);
        }, this);
    } 
});

var ListItemView = Backbone.View.extend({

    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.render();
    },

    tagName: 'li',

    template: _.template( $('#item-template').html() ),

    render: function() {
        var temp = this.template({model: this.model.toJSON()});

        this.$el.html( temp );
    },

    events: {
        'click': 'toggleActive'   
    },

    toggleActive: function(e) {
        this.model.set('isActive');
        console.log(this.model.toJSON());
    }
});

var theCollection = new TheCollection(data);

var listView = new ListView({collection: theCollection});
listView.render();

模板：

<div class="js-container"></div>

<script type="text/template" id="item-template">
    <span <% if (model.isActive === true) { %> class="active" <% } %>>
        <%- model.name %>
    </span>
</script>

Answer 1

试试这个http://jsfiddle.net/ManikandanK/c477rone/1/ 你需要纠正两件事。

ensureSingleActive: function(current) {
    if(current.get('isActive') ) {

        var previous=   _.find(this.models, function(model) {
            return model != current && model.get('isActive') 
        });

    if (previous) {
        previous.set('isActive', false);   
    } 
}
}

当您进入此功能时，已经设置了当前模型值。所以你不需要再次设置值。您错过了将值传递给设置功能。</ p>

this.model.set('isActive', true);

Answer 2

要扩展其他答案，您可以回避事件并直接调用集合中的方法。

在您看来：

activate: function() {
  this.model.collection.setActive(this.model)
}

然后在你的收藏中：

setActive: function(model) {
  this.each( function(m) { m.set('selected', m === model) }
}

可读，性能稍差，但除非您正在处理大量收藏，否则不应该重要。

Answer 3

您在这里缺少额外的参数：

toggleActive: function(e) {
        this.model.set('isActive'); // this.model.set('isActive', true);

即使你解决了这个问题，你赢得的例子仍然有效，因为你会陷入无限循环。

this.on('change:isActive', this.ensureSingleActive, this);

＆＃39; ensureSingleActive＆＃39;每当isActive发生变化时都会被调用，因此当你为其他模型设置isActive时，它会被重复调用。

我建议确保在ListView中一次只有一个活动。甚至从ListItemView触发自定义，并确保只选择一个自定义。

我希望他的帮助。

在任何时候都可以在Backbone Collection中将Active属性设置为仅1个模型

3 个答案: