knockout.js - 如何使用 Knockout 绑定(bind)注入(inject) jQuery 模板

Question

首先，我有一个 Button addTemplate，它将通过 Knockout 和 jQuery 将 html 添加到我的正文中:

<button data-bind="click: addTemplate">Add Template</button>

<script type="text/html" id="MyTemplate">
    <div id="container">
        <a href="#" data-bind="click: $root.doAlert">Do Alert</a>
    </div>
</script>

添加的模板也有一些 knockout 绑定(bind)。他们应该在我的 ViewModel 中激活警报:

function MyViewModel()
{
    self = this;

    self.addTemplate = function () {
        $($("#MyTemplate").html()).appendTo("body");
    }

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

ko.applyBindings(new MyViewModel());

当我点击我添加的模板中的链接时，doAlert 函数什么都不做。我不想在我的 ViewModel 中使用字符串链接的 HTML 模板。

这是 fiddle :http://jsfiddle.net/tgu8C/5/

Answer 1

您应该对新添加的元素应用绑定(bind)。

var newElement = $($("#MyTemplate").html()).appendTo("body");
ko.applyBindings(self, newElement);  

JSFiddle DEMO