Question

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

这可能吗？

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

更新

根据RP的答案，假设这适合您的用例，最好的选择是将它们附加到dom 隐藏，更新您的viewmodel，然后显示您的节点。这样的事情对我有用：

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

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

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

END UPDATE

这是完整的代码：

的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中绑定的评估包含在一个计算的observable中，该observable在重新计算时会自行处理并识别出它不是当前文档的一部分。

所以，没有一个简单的解决方法可以让你做你正在尝试的事情。您可以在进行更新时隐藏元素，然后取消隐藏它们。

Answer 2

这里发生的是当你调用detach方法时，ko会丢失对分离节点的绑定。使其工作的最简单方法是每次分离和附加节点时重新应用绑定。

请参阅此jsfiddle：http://jsfiddle.net/EZFDt/

编辑：有了解决方法，请记住可能会影响性能。也许您可以重新思考解决问题的方式 - 您是否可以将节点移动到不同的隐藏位置而不是分离它们？你能简单地隐藏它们吗？

Answer 3

自从您提出问题以来已经有一段时间了，但我发现使用 detach ，然后立即追加到DOM中的某个有效位置，使所有绑定都能正常运行。然后，当您的应用程序更改状态时，您可以分离，追加到您需要的任何位置。

我将它用于附加了多个事件的部分，例如JQUI元素，表单等，以便我可以保持一个副本运行，并且只是附加到我去的页面。例如。注册表单，也可用作编辑个人资料。

在您的情况下，最初将其附加到'visibility：hidden;'某些点上的节点显然是分离的元素可能是合理的。

唐祝你有美好的一天

将KnockoutJS与分离的节点一起使用

3 个答案: