templates - 弹出窗口没有绑定，重新应用会清除整个视图模型

Question

http://jsfiddle.net/scottbeeson/SRUKN/24/

我正在使用它来创建一个新的 div：

$("<div/>", {
    class: "itemView",
    id: name,
    "data-bind": "template: { name: 'tmplItemView' }"
}).appendTo("body")

模板具有适当的数据绑定

<script type="text/html" id="tmplItemView">
    <div class="itemHeader" data-bind="text: name">Item Name</div>
    <span id="itemClose" class="closeWindow"><i class="icon-remove">X</i></span>
</script>

但是当我触发创建时，它会在 DOM 中创建一个空 div。如果我之后立即应用绑定，则模板似乎可以正常工作（即 DIV 不为空），但它会清除整个视图模型。

我之前处理过这个问题，但我认为现在的不同之处在于我使用 jquery 函数来捕获点击而不是使用敲除的点击绑定。

Answer 1

我看了看，找到了解决办法。见：http: //jsfiddle.net/SRUKN/26/

function createItemDiv(item) {
    console.log('Creating div from template');
    var $el = $("<div/>", {
        class: "itemView",
        id: item.name(),
        "data-bind": "template: { name: 'tmplItemView' }"
    });
    $el.appendTo("body");
    $el.draggable();
    ko.applyBindings(item, $el.get(0));
}

基本上，我只是通过传递要绑定的 VM 和目标元素来确保applyBindings调用更有针对性。