Question

为什么JSFiddle不起作用的任何想法？我想要做的是看看我是否可以使用HTML节点作为使用Knockout更新的模板。初始克隆有效，但是当我更新模型然后再次尝试克隆时，之前的值仍然在生成的HTML中。我把暂停用来确保它不是一个时间问题，淘汰赛必须在我调用clone（）之前更新所有东西，但它没有什么区别。

<h1></h1>
<h2></h2>
<div>
    <div id="template" >
        <label>Description</label>
        <label data-bind="text: descr"></label>
    </div>
</div>

var model = {
    descr: ko.observable('Karl')   
}
ko.applyBindings(model);
var $dom = $('#template').clone();
$('h1').append($dom);
model.descr('Keith');
setTimeout(function() {
    var $dom1 = $('#template').clone();
    $('h2').append($dom1);
}, 3000);

更新：一旦我今天早上头脑清醒，这个问题就显而易见了。克隆和插入后，我的DOM有两个id为'template'的元素。当我第二次尝试克隆它时，因为我在原始之前插入它，它首先抓取它。我不知道淘汰赛的内部工作方式，但即使通过它具有数据绑定属性，淘汰赛也不会更新它，只有原始版本。所以我需要做的就是给克隆一个新的id。我用工作代码更新了JSFiddle。

Answer 1

ko.applyBindings(model)电话会立即发生，仅适用于当前可用的元素。

除非仅为这些新元素再次调用applyBindings，否则添加到具有数据绑定属性的页面的任何后续标记都将无效。

至少就是我看待它的方式......但有趣的是，下面对你的代码进行了更改......似乎对你的两个克隆都有效......而不仅仅是其中的一个。

var model = {
    descr: ko.observable('Karl')   
}

var $dom = $('#template').clone();

$('h1').append($dom);

// move this below the clone and .append calls
ko.applyBindings(model);

model.descr('Keith');

setTimeout(function() {
    var $dom1 = $('#template').clone();
    $('h2').append($dom1);
}, 3000);

您不能再次applyBindings，因为无效将绑定应用于元素两次。

正确实现此目的的方法是指定要应用绑定的元素。

即。

ko.applyBindings(model, document.getElementByID("my element id here"));

然后任何进一步的动态标记或异步部分加载的标记应该具有应用于回调方法中该元素的视图模型的绑定。

淘汰更新后克隆

1 个答案: