将 KnockoutJS 与分离的节点一起使用 [英] Using KnockoutJS with detached nodes

问题描述

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

这可能吗?

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

<小时>

更新

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

$("#updateAndAttach").click(function () {varjunk = $("<div/>").css("display", "none");垃圾.追加(节点)；$("#home").append(junk);vm.a("AAA");vm.b("BBB");$(nodes).unwrap();});

结束更新

<小时>

完整代码如下:

JavaScript

$(function () {函数视图模型(){this.a = ko.observable("a");this.b = ko.observable("b");}var vm = new ViewModel();ko.applyBindings(vm, document.getElementById("home"));var 节点 = 空；$("#detach").click(function () {节点 = $("#home").children().detach();});$("#attach").click(function () {$("#home").append(nodes);});$("#update").click(function () {vm.a("AAA");vm.b("BBB");});})();

HTML:

<input type="text" data-bind="value: a"/><input type="text" data-bind="value: b"/>
<button id="分离">分离</button><button id="update">更新</button><button id="attach">Attach</button>

解决方案

在单个 data-bind 中对绑定的评估被包装在一个计算的 observable 中，当它被重新- 评估并承认它不是当前文档的一部分.

因此，没有一种简单的解决方法可以让您执行您正在尝试的操作.您当然可以在进行更新时隐藏元素，然后取消隐藏它们.

What I'm looking to do is detach some nodes using jQuery's detach method, update my ViewModel, attach my nodes back, and have the values be updated.

Is this possible?

Here's a full fiddle of what I'm shooting for. Basically, I'd like to be able to go from left to right, click detach, update, and attach and have fresh values in the textboxes.

---

UPDATE

Based on RP's answer, the best bet, assuming this fits your use case, is to attach them to the dom hidden, update your viewmodel, and then show your nodes. Something like this works for me:

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

---

Here's the full code:

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>

解决方案

The evaluation of the bindings in a single data-bind are wrapped in a computed observable that will dispose of itself when it is re-evaluated and recognizes that it is not part of the current document.

So, there is not a simple workaround that would allow you to do what you are trying. You could certainly hide the elements while updates are being made and then unhide them.

这篇关于将 KnockoutJS 与分离的节点一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！