3

起初，我有一个 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>

添加的模板也有一些淘汰赛绑定。他们应该在我的 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 模板。

这是小提琴：http: //jsfiddle.net/tgu8C/5/

4

2 回答 2

1

您应该将绑定应用于新添加的元素。 

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

JSFiddle 演示

于 2013-11-04T15:08:35.117 回答
0

如果不对您要解决的问题的背景有更广泛的了解，我可能会找错树。但是，我怀疑您以错误的方式解决问题。您永远不需要重复将模板添加到 DOM。按预期使用Knockout 模板将为您做到这一点。我可以推荐以下模型...

function MyViewModel() {
    var self = this;

    self.items = ko.observableArray([]);

    self.add = function () {
        self.items.push({});
    };

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

ko.applyBindings(new MyViewModel());

...伴随以下标记...

<button data-bind="click: add">Add Template</button>
<!-- ko template: { name: 'myTemplate', foreach: items } -->
<!-- /ko -->
<script type="text/html" id="myTemplate">
    <div class="container">
        <a href="#" data-bind="click: $root.doAlert">Do Alert</a>
    </div>
</script>

我还应该指出，我已经用 CSS 类替换了容器的 id，因为这更有意义。

于 2013-11-05T11:07:46.700 回答