Knockout.js 将 Click 事件绑定到虚拟元素答案

【问题标题】：Knockout.js Binding Click event to virtual elementsKnockout.js 将 Click 事件绑定到虚拟元素
【发布时间】：2013-05-02 23:32:50
【问题描述】：

我知道如何将锚元素绑定到点击事件。但是当通过 HTML 绑定事件加载锚元素时，我不确定该怎么做。这是我的代码：

<a href='/my_page' data-bind="click:$root.loadPage">Click here to load</a>

** 此锚元素从服务器提供 HTML。在提供的 HTML 中，我有一些想要绑定到类似函数的锚元素。但我在做什么是行不通的。这是我执行“loadPage”的淘汰代码

this.loadPage = function(data,object)
{

    self.showLoadingIndicator();

    $.get(object.target.href, function(response)
    {

        self.pageData(response.html);

    }, 'json');

}

** 我有一个名为“pageData”的可观察设置，它为页面提供 HTML 内容。

我的问题是：在我的“服务”HTML 中，我在这里的一些 HTML 对象上设置了完全相同的点击绑定，但它们不会触发事件......

有什么解决办法吗？

提前致谢！

罗伯

【问题讨论】：

knockout data-bind on dynamically generated elements的可能重复
我以前看过那个帖子，但我无法得到解决方案，所以我只能假设这是一个不同的问题。 ko.ApplyBindings 中的第二个参数我认为会起作用，如果我能弄清楚我应该放在这里的东西......我试图把“pageData”绑定到的 div 对象......

标签： knockout.js

【解决方案1】：

当您调用 applyBindings 时，它只会影响页面上已经存在的内容 - 它不会影响稍后加载的任何内容。

但是，您可以在添加到页面的新标记块上再次调用 applyBindings。

var viewmodel = ...;
ko.applyBindings(viewmodel);

this.loadPage = function(data,object)
{    
    self.showLoadingIndicator();

    $.get(object.target.href, function(response)
    {
        self.pageData(response.html);

        var newStuffAddedToDOM = ...;
        ko.applyBindings(viewmodel, newStuffAddedToDOM);

    }, 'json');    
}

这是一个有效的小提琴：http://jsfiddle.net/tlarson/65K3u/

【讨论】：

哪里 newStuffAddedToDOM = response.html ??那正确吗？我收到一条错误消息，提示第二个参数必须是 DOM 节点...
如错误所示，newStuffAddedToDOM 需要是对 DOM 节点的引用，例如newStuffAddedToDOM = $("#container")[0];其中“容器”是包装 pageData 内容的
（或其他元素）的 ID。