使用淘汰赛 js 绑定更新 html 元素答案

【问题标题】：Update html element with knockout js binding使用淘汰赛 js 绑定更新 html 元素
【发布时间】：2014-02-18 06:35:29
【问题描述】：

我想用淘汰赛 js 绑定更新 ui。我可以更新列表，但更改没有反映在 ui 中。我收到以下错误：

Uncaught Error: You cannot apply bindings multiple times to the same element.

以下是我的代码：当我检查数组的长度时，警报显示数组已更新，但我希望更改也反映在 ui 中。

<!DOCTYPE html>
<html>
<head>
<script src="js/knockout-3.0.0.js"></script>
<script>

var Person = [ {
    name : "qwe qwe",
    number : 123123123
}, {
    name : "asd asd",
    number : 999999999
} ];

var myVM = function() {
    this.persons = ko.observableArray(Person);
}

function init() {   
alert(Person.length);
    ko.applyBindings(new myVM());   
}

function AddPerson()
{
PushToArray(Person,"name","123");
init();
}

function PushToArray(array, var1, var2) {
    array.push({
        name : var1,
        number : var2
    });
}
</script>

</head>
<body onload="init()">
            <div>
                <button onclick="AddPerson()">Add</button>              
                    <div data-bind="foreach:persons">
                        <p data-bind="text:name"> </p>
                    </div>                      
            </div>      
</body>
</html>

【问题讨论】：

添加人员时不需要调用ko.applyBindings(new myVM())，只需要调用一次
谢谢你，你的建议奏效了

标签： knockout.js jquery-mobile-listview

【解决方案1】：

ko.applyBindings() 函数只能调用一次。从那时起，您对视图模型中的可观察对象所做的每一次更改都会自动反映在这个家伙中。

只需在您的AddPerson() 函数中删除对init(); 函数的调用，然后只从其他地方调用一次，这样就可以解决问题

【讨论】：

很抱歉，在您删除 init() 之后，您仍然需要从其他地方调用它，但只能调用一次。