为什么淘汰赛绑定不会覆盖视图模型答案

【问题标题】：Why knockout binding does not overwrite viewmodel为什么淘汰赛绑定不会覆盖视图模型
【发布时间】：2015-04-16 18:41:47
【问题描述】：

我正在使用淘汰赛 foreach 绑定来绑定 div。但是当我单击按钮时，不会创建新模型并且模型会不断扩展。我希望我的数据应该只绑定一次，而不是一次又一次地绑定。我做错了什么。这里是Here is a demo of problem

function bindValues() {

            var obj1 = { Name: ko.observable("location & size") };
            var obj2 = { Name: ko.observable("font") };
            var obj3 = { Name: ko.observable("border lines + fills") };
            var obj4 = { Name: ko.observable("alignment + padding") };

            var model = new Object({
                Styles: ko.observableArray()

            });

            model.Styles.push(obj1);
            model.Styles.push(obj2);
            model.Styles.push(obj3);
            model.Styles.push(obj4);

            ko.applyBindings(model, document.getElementById("style-accordion"));

  }

【问题讨论】：

标签： javascript jquery html dom knockout.js

【解决方案1】：

它是因为你一次又一次地将值推送到你的 observableArray 而你每次调用applyBindings，你只需要应用一次绑定并覆盖数组

        var model = new Object({
            Styles: ko.observableArray()

        });
        ko.applyBindings(model, document.getElementById("style-accordion"));


    function bindValues() {

        var obj1 = { Name: ko.observable("location & size") };
        var obj2 = { Name: ko.observable("font") };
        var obj3 = { Name: ko.observable("border lines + fills") };
        var obj4 = { Name: ko.observable("alignment + padding") };

        // override instead of push
        model.Styles([obj1,obj2,obj3,obj4]);


    }

fiddle

【讨论】：

【解决方案2】：

因为每次调用 bindValues 时您都在调用 ko.applyBindings。在您的情况下，此函数只应调用一次。

我建议像这样在 ViewModel 中移动 bindValues：

var model = {
    Styles: ko.observableArray(),
    bindValues: function() {

        var obj1 = { Name: ko.observable("location & size") };
        var obj2 = { Name: ko.observable("font") };
        var obj3 = { Name: ko.observable("border lines + fills") };
        var obj4 = { Name: ko.observable("alignment + padding") };


        model.Styles.push(obj1);
        model.Styles.push(obj2);
        model.Styles.push(obj3);
        model.Styles.push(obj4);
    }

};
ko.applyBindings(model);

见http://jsfiddle.net/tjjc5bcq/

【讨论】：