Question

我在kncokout js中相当新。我注意到一个代码，当点击按钮时，动态地将html添加到页面中。这是代码。我正在寻找一些可以帮助我理解下面代码的人的帮助。这是一个完整的代码。

function MyViewModel() {
    var self = this;

    self.items = ko.observableArray([]);

    self.add = function () {
        self.items.push({});
    };

    self.doAlert = function() {
        alert('Hello World');
    } 
}

ko.applyBindings(new MyViewModel());

<button data-bind="click: add">Add Template</button>
<!-- ko template: { name: 'myTemplate', foreach: items } -->
<!-- /ko -->
<script type="text/html" id="myTemplate">
    <div class="container">
        <a href="#" data-bind="click: $root.doAlert">Do Alert</a>
    </div>
</script>

不清楚的区域是单击按钮时，空元素将添加到items数组中，并且新的html将添加到页面。它是如何变得可能的。

以下语法也不清楚。

<!-- ko template: { name: 'myTemplate', foreach: items } -->
<!-- /ko -->

Answer 1

Knockout使用绑定将您的模型（javascript）绑定到您的视图（html）。您在html中看到的data-bind属性用于指示视图的哪些部分应绑定到模型的函数或字段。

Knockout还在模型方面使用了可观察的属性和集合。

因此，当您点击Add Template按钮时，knockout会调用模型中的add方法，因为该按钮使用的是click binding。

然后add函数将新对象推送到items集合。由于集合是可观察的，因此knockout立即知道模型已更改，并遵循在调用applyBinginds时构建的依赖关系图中的任何依赖关系，并在适当时更新依赖关系。

为another kind of binding，在您的情况下绑定到items集合。因此，在可观察集合发生更改后，立即将绑定模板运行到集合中的新对象，从而在页面中生成新的div。

如果你是淘汰赛的新手，我建议你花点时间做tutorial并偷看live examples，因为它们是一个很好的知识来源。

如何敲除js动态点击按钮

1 个答案: