如何使用knockout绑定新元素?

Bla*_*dow 6 javascript data-binding web knockout.js

如何在页面加载后绑定新元素?

我有类似的东西

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);
Run Code Online (Sandbox Code Playgroud)

如果我试试这个

this.makeUI = function(container)
{
    div = document.createElement("div");
    div.innerHTML = "<button data-bind='click: hello'>Click</button>";
    ko.applyBindings(new system,div);
}    
Run Code Online (Sandbox Code Playgroud)

但根据这些 帖子,它将无法运作.

mad*_*kay 11

淘汰赛的目标是只在一组dom元素上调用一次淘汰赛.因此,如果在整个文档上重复调用applyBindings,则会出现多个绑定问题.

在一些情况下,多次调用applyBindings是合理的,这是在部分视图的情况下,在第一次绑定时不在dom中,因此没有绑定.您可以通过选择性地将applyBindings作用于该dom元素来绑定它们.

这是你想要实现的一个例子.您的问题是您没有插入您创建的节点.

http://jsfiddle.net/madcapnmckay/qSqJv/

我不会为这个特定的例子推荐这种方法,有一种更好的方法.

如果你想动态创建dom元素并让它们通过knockout绑定,最常见的方法是使用内置的模板功能,它负责插入元素并绑定它找到的任何数据绑定属性.

因此,如果你想创建一些你可以做的按钮

this.makeUI = function(container)
{
    self.buttons.push({
        text: "button " + self.buttons().length,
        handler: this.hello
    });
}
Run Code Online (Sandbox Code Playgroud)

这是一个小提琴.

http://jsfiddle.net/madcapnmckay/ACjvs/

希望这可以帮助.

  • jsfiddles中的knockout.js链接不再有效.我更新它们以指向CDN镜像.尝试; http://jsfiddle.net/ACjvs/75/ http://jsfiddle.net/qSqJv/84/ (2认同)