Question

我在HTML部分中发现了使用敲除绑定的问题。我在页面上有一个容器区域。它的内容应该由我的应用程序逻辑动态替换。我使用分离/追加技术来做到这一点。但是我注意到元素分离时不会传播更新。不仅如此，在某些情况下，绑定完全丢失，当元素被附加回来时，更新停止工作在我的情况下更新数据很重要，因为虽然元素可能不可见，但它仍然可以异步更新我发现stackoverflow上的线程指向同样的问题。但是我找不到明确的答案。有各种不太吸引人的解决方法（例如使用私有淘汰方法）。让我按照预期工作的唯一方法是显示/隐藏部分而不是分离/追加这是设计的行为（我的意思是淘汰库设计）？如果是这样，我不想通过引入各种解决方法来规避它，从而导致可能出现更多问题。如果不是，那么在淘汰赛中推荐/分离使用的推荐模式是什么，使其像show / hide一样工作（我宁愿使用detach / append，因为主应用程序对所有容器使用此策略）。

这是重现问题的jsbin链接。我还包括show / 隐藏样本进行比较：http://jsbin.com/iTIrigAp/3/edit?html,js,output

<h3>Attach/Detach</h3>

<p>issue 1: Detach/Update/Attach/Update</p>
<p>issue 2: Run with JS/Update/Enter new val/Detach/Update/Attach</p>

<div id="attdet">
    <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>


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

        this.c = ko.observable("c");
        this.d = ko.observable("d");     
    }

    var vm = new ViewModel();

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


    var nodes = null;

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

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

    $("#update").click(function () {
        vm.a("att-det");
        vm.b("att-det");
    });

Answer 1

如果您只是隐藏和显示节点，请使用挖空可见绑定：

可见绑定导致关联的DOM元素被隐藏或根据您传递给绑定的值显示。

或CSS绑定将true / false值绑定到它：

css绑定将一个或多个命名的CSS类添加或删除相关的DOM元素。例如，这有助于突出显示一些内容如果它变为负数，则为红色。

或者，可能是最简单的方法，使用jQuery的show / hide事件。

你的问题是，分离从字面上删除了DOM中的项目。虽然它确实存储了字段的事件和值，但它超出了Knockout识别参数的能力，并且在重新进入DOM时会重新评估。

另一方面，显示/隐藏，只需将它们从显示屏上移除，这似乎是您的实际意图。

来源：

分离/附加vs显示/隐藏部分

1 个答案: