javascript - 如何使用 knockout 绑定(bind)新元素？

Question

如何绑定(bind)页面加载后创建的新元素？

我有这样的东西

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它不会起作用。

Answer 1

knockout 的目标是只对一组 dom 元素调用一次 knockout。因此，如果您对整个文档重复调用 applyBindings，您将遇到多个绑定(bind)的问题。

在某些情况下，多次调用 applyBindings 是合理的，这是在第一次绑定(bind)时不在 dom 中的部分 View 的情况下，因此未绑定(bind)。您可以通过有选择地将 applyBindings 的范围限定到该 dom 元素来绑定(bind)它们。

这是您尝试实现的目标的示例。您的问题是您没有插入您创建的节点。

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

对于这个特定示例，我不推荐这种方法，有更好的方法。

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

所以如果你想创建一些你可以做的按钮

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

这是一个 fiddle 。

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

希望这对您有所帮助。