如果带有布尔值的绑定未正确评估，则淘汰赛答案

【问题标题】：knockout if bindings with boolean not evaluating correctly如果带有布尔值的绑定未正确评估，则淘汰赛
【发布时间】：2013-03-22 16:25:23
【问题描述】：

我的视图中有以下内容，使用 span 显示只读视图，使用 input 显示编辑视图。

<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 绑定？

【问题讨论】：

标签： javascript mvvm knockout.js knockout-2.0

【解决方案1】：

如果您的IsEditing 是可观察的，则if 绑定应该正确评估它。

但是，if 绑定应该应用于“类似容器”的元素，例如在可以有子元素的元素上。

documentation 有点混乱，谈论包含的标记：

然而，if 绑定会在你的 DOM 中物理添加或删除 包含的标记，

因为input 不能有子元素，所以if 不能从input 中删除任何内容。您需要将input 包装成div 并在其中应用if，或者您可以使用无容器绑定语法：

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

演示JSFiddle.

【讨论】：