如何使用淘汰赛绑定新元素?
Posted
技术标签:
【中文标题】如何使用淘汰赛绑定新元素?【英文标题】:How do I bind new elements using knockout? 【发布时间】:2012-04-20 12:27:45 【问题描述】:如何绑定页面加载后创建的新元素?
我有这样的事情
system = function()
this.hello = function()
alert("hello");
this.makeUI = function(container)
div = document.createElement("div");
div.innerhtml = "<button data-bind='click: hello'>Click</button>";
ko.applyBindings(new system);
如果我试试这个
this.makeUI = function(container)
div = document.createElement("div");
div.innerHTML = "<button data-bind='click: hello'>Click</button>";
ko.applyBindings(new system,div);
但根据these posts 是行不通的。
【问题讨论】:
【参考方案1】:knockout 的目标是在一组 dom 元素上只调用一次 knockout。因此,如果您在整个文档上重复调用 applyBindings,您将遇到多个绑定的问题。
在某些情况下,多次调用 applyBindings 是合理的,这是在第一次绑定时不在 dom 中的局部视图的情况下,因此未绑定。您可以通过选择性地将 applyBindings 范围限定到该 dom 元素来绑定它们。
这是您尝试实现的目标的示例。你的问题是你没有插入你创建的节点。
http://jsfiddle.net/madcapnmckay/qSqJv/
对于这个特定的例子,我不推荐这种方法,有更好的方法。
如果您想动态创建 dom 元素并通过敲除绑定它们,最常见的方法是使用内置的模板功能,该功能负责插入元素并绑定它找到的任何数据绑定属性。
因此,如果您想创建多个按钮,您可以这样做
this.makeUI = function(container)
self.buttons.push(
text: "button " + self.buttons().length,
handler: this.hello
);
这是一个小提琴。
http://jsfiddle.net/madcapnmckay/ACjvs/
希望这会有所帮助。
【讨论】:
我用你的解决方案尝试了上面的小提琴,但它不再起作用了。有什么想法吗? jsfiddles 中的 knockout.js 链接不再有效。我将它们更新为指向 CDN 镜像。尝试; jsfiddle.net/ACjvs/75jsfiddle.net/qSqJv/84以上是关于如何使用淘汰赛绑定新元素?的主要内容,如果未能解决你的问题,请参考以下文章