javascript - 如何使用 knockout 可观察变量删除 html 内部的 Html 元素

Question

如何从 javascript 代码端使用 knockout js 清除元素的内部 html。

在js文件中:

var mustDestroy = ko.observable(false);

//some code later

mustDestroy(true);

在 html 中:

<div data-bind="some binding here to clear inside of div with related to mustDestroy">
    <p>some html here</p>
    <a href="foo">foo</a>
    <img src="foo" />
</div>

变成(动态):

<div>
</div>

我需要针对这个问题的 knockout 相关解决方案。不仅仅是 JavaScript。

Answer 1

您稍后会将可观察到的 knockout 改回来吗？ if 或 ifnot 绑定(bind)非常适合删除 div 的内容。

<div data-bind="ifnot: mustDestroy">
    <p>some html here</p>
    <a href="foo">foo</a>
    <img src="foo" />
</div>

如果您希望在变量为 true 时 div 为空，则上述解决方案非常有效。

您还可以编写自己的绑定(bind):

ko.bindingHandlers.destroyOnTrue = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        if (ko.utils.unwrapObservable(valueAccessor())) {
            ko.virtualElements.emptyNode(element);
        }
    }
}