javascript - 将 KnockoutJS 与分离节点一起使用

Question

我想要做的是使用 jQuery 的分离方法分离一些节点，更新我的 ViewModel，重新附加我的节点，并更新值。

这可能吗？

这是一个 full fiddle我正在拍摄的东西。基本上，我希望能够从左到右，单击分离、更新和附加，并在文本框中具有新值。

---

更新

根据 RP 的回答，假设这适合您的用例，最好的办法是将它们附加到 dom hidden，更新您的 View 模型，然后显示您的节点。这样的事情对我有用:

$("#updateAndAttach").click(function () {
    var junk = $("<div />").css("display", "none");
    junk.append(nodes);
    $("#home").append(junk);

    vm.a("AAA");
    vm.b("BBB");

    $(nodes).unwrap();
});

结束更新

---

完整代码如下:

JavaScript

$(function () {

    function ViewModel() {
        this.a = ko.observable("a");
        this.b = ko.observable("b");
    }

    var vm = new ViewModel();

    ko.applyBindings(vm, document.getElementById("home"));

    var nodes = null;

    $("#detach").click(function () {
        nodes = $("#home").children().detach();
    });

    $("#attach").click(function () {
        $("#home").append(nodes);
    });

    $("#update").click(function () {
        vm.a("AAA");
        vm.b("BBB");
    });
})();

HTML:

<div id="home">
    <input type="text" data-bind="value: a" />
    <input type="text" data-bind="value: b" />
</div>

<button id="detach">Detach</button>
<button id="update">Update</button>
<button id="attach">Attach</button>

Answer 1

单个 data-bind 中绑定(bind)的评估被包装在一个计算的可观察对象中，当它被重新评估并识别出它不是当前文档的一部分时，它将自行处理。

因此，没有一种简单的解决方法可以让您按照自己的意愿行事。您当然可以在进行更新时隐藏元素，然后取消隐藏它们。