敲除如果绑定与布尔值没有正确评估

Question

我在视图中有以下内容,使用span显示只读视图和输入以显示编辑视图.

<span data-bind="{ ifnot:IsEditing, text:SystemName }"></span>
<input type="text" id="SystemName" data-bind="{ if:IsEditing, value:SystemName }" />

IsEditing observable正在评估为false.我正在返回具有以下层次结构的JSON.

Project
   .
   .
   Systems (collection)
     SystemName

我正在通过JQuery加载值,使用以下内容创建可观察的模型:

$.ajax({
    type: "get",
    url: "..",
    success: function (d) {
        var pList = [];

        for (var p = 0, plen = d.Data.length; p < plen; p++) {
            var proj = d.Data[p];
            var systems = proj.Systems;
            var sList = [];

            proj = ko.mapping.fromJS(proj);

            for (var s = 0, slen = systems.length; s < slen; s++) {
                sList.push(ko.mapping.fromJS(systems[s]));
            }

            proj.Systems = ko.observableArray(sList);

            pList.push(proj);
        }

        window["model"].projects(pList);
    },
    error: function (e) {
        debugger;
        alert("An error occurred");
    }
});

在加载时,无论何时加载模型并计算此表达式,两个元素始终显示,而不是显示跨度并隐藏输入.当我将其更改为可见绑定时,只显示范围.当IsEditing评估为false时,为什么输入显示if绑定？

Answer 1

如果你的IsEditing一个可观察的if绑定应该正确评估它.

但是,if绑定应该应用于"容器之类"元素,例如应用于可以具有子元素的元素.

该文档有点混乱,有关谈判包含的标签:

但是,if绑定会物理地添加或删除DOM中包含的标记,

因为input不能有子元素所以if无法从中删除任何东西input.你需要将你包装input成a div并在那里应用,if或者你可以使用无容器绑定语法:

<!-- ko if: IsEditing -->
    <input type="text" id="SystemName" data-bind="{ value: SystemName }" />
<!-- /ko -->

演示JSFiddle.