为什么敲除绑定不会覆盖视图模型

Question

我正在使用敲除 foreach 绑定来绑定 div。但是当我单击按钮时，不会创建新模型并且模型会不断扩展 continously.I 希望我的数据应该只绑定一次而不是再次绑定 again.What 我做错了。这里是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"));

  }

Answer 1

因为每次调用 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/

Answer 2

这是因为您一次又一次地将值推送到您的 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

为什么敲除绑定不会覆盖视图模型

Why knockout binding does not overwrite viewmodel

javascript

jquery

html

dom

knockout.js