随时将活动属性设置为仅 Backbone Collection 中的 1 个模型

Question

我有 collection 个 Backbone 个模型。我想将模型属性设置为 'active'，但要确保一次只能激活 1 个模型。我一直无法让它工作，正在寻找一些指导。

这是我的代码 fiddle：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

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

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

即使你修复了这个问题，你得到的例子也不会工作，因为你会陷入无限循环。

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

'ensureSingleActive' 每次 isActive 更改时都会被调用，因此当您在其中为其他模型设置 isActive 时，它会被重复调用。

我的建议是确保在您的 ListView 中一次只有一个处于活动状态。甚至从 ListItemView 触发自定义并确保只选择一个。

希望对您有所帮助。

Answer 2

试试这个 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);   
    } 
}
}

当您进入此函数时，当前模型值已经设置。所以你不需要再次设置该值。您错过了将值传递给 set 函数。

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

Answer 3

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

在您看来：

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

然后在你的 collection:

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

可读性好，性能稍差，但应该无关紧要，除非您处理大量 collections。

随时将活动属性设置为仅 Backbone Collection 中的 1 个模型

Set an Active property to only 1 model in a Backbone Collection at any time

javascript

jquery

backbone.js

随时将活动 属性 设置为仅 Backbone Collection 中的 1 个模型

Set an Active property to only 1 model in a Backbone Collection at any time

javascript

jquery

backbone.js

随时将活动属性设置为仅 Backbone Collection 中的 1 个模型