4

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

这可能吗？

这是我正在拍摄的一个完整的小提琴。基本上，我希望能够从左到右，单击分离、更新和附加，并在文本框中有新的值。

更新

根据 RP 的回答，假设这适合您的用例，最好的选择是将它们附加到 dom hidden，更新您的视图模型，然后显示您的节点。像这样的东西对我有用：

$("#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>
4

3 回答 3

3

对单个绑定的评估data-bind被包装在一个计算的 observable 中，当它被重新评估并认识到它不是当前文档的一部分时，它将自行处理。

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

于 2012-05-03T18:16:59.187 回答
1

这里发生的情况是，当您调用 detach 方法时，ko 失去了与分离节点的绑定。使其工作的最简单方法是每次分离和附加节点时重新应用绑定。

看到这个jsfiddle：http: //jsfiddle.net/EZFDt/

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

于 2012-05-03T18:19:14.387 回答
1

你问这个问题已经有一段时间了，但我发现使用detach，然后立即附加到 DOM 中的某个有效位置，使所有绑定都能正常工作。然后，您可以在应用程序更改状态时分离、附加到任何您需要的地方。

我将它用于附加了多个事件的部分，例如 JQUI 元素、表单等，这样我就可以保留一份副本，然后附加到我去的页面上。例如。一个注册表单，它也用作编辑个人资料。

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

唐 祝你有美好的一天

于 2014-11-28T10:44:17.427 回答