Javascript knockout.js与表格单元格内容的可见绑定不起作用

我第一次使用knockout.js（v2.2.1），并尝试构建一个表，其中元素基于视图模型中的“IsReadOnly”属性在文本和输入字段之间切换。这是通过在表格单元格中的范围和输入标记上使用“可见”来实现的

这是桌子：

<table>
 <tr>
   <td colspan="2">
     <button id="btnEditSave" data-bind="text: btnEditSave, click: doEditSave" style="float:right;" />
   </td>
 </tr>
 <tr>
  <td>Server Name: </td>
  <td>
   <span data-bind="text: Server.ServerName, visible: IsReadOnly() == true" />
   <input data-bind="value: Server.ServerName, visible: IsReadOnly() == false" maxlength="50" style="width:400px;" />
  </td>
 </tr>
</table>

---

除不显示输入字段外，所有内容均按预期进行切换。我尝试过各种形式的输入标记的“可见”表达式，但都不起作用。我遗漏了什么？

我认为你应该写

…value:Server（）.ServerName，

和

…text:Server（）.ServerName，

因为

服务器

是一个

可观察的

我觉得其他一切都很好

顺便说一句：A会有很大帮助

编辑： 我刚刚设置了一个JSFIDLE：

---

问题是您编写了一个自动关闭span，不能自动关闭。只需

编写

而不是

，您的初始版本就可以运行了

我无法确定为什么我的第一个示例不起作用，但我找到了一个解决方案：使用另一个属性“IsEditable”，它与“IsReadOnly”相反，因此我的表达式只测试true

表行现在是：

<tr>
  <td>Server Name: </td>
  <td>
   <input data-bind="value: Server.ServerName, visible: IsEditable" maxlength="50" style="width:400px;" />
   <span data-bind="text: Server.ServerName, visible: IsReadOnly" />
  </td>
 </tr>

服务器名称：

模型是：

var ServerViewModel = function () {
    // Data
    var self = this;
    self.IsReadOnly = ko.observable(true);       // the form's input mode
    self.IsEditable = ko.observable(false);      // <<--- the workaround
    self.btnEditSave = ko.observable("Edit");    // the Edit/Save button text
    self.Server = ko.observable({});             // the Server object

    // Operations
    self.doEditSave = function () {
        var flag = self.IsReadOnly();
        if (flag) {
            // switch to Edit mode
            self.btnEditSave("Save");
            self.IsReadOnly(false);
            self.IsEditable(true);
        }
        else {
            // switch back to readOnly
            self.btnEditSave("Edit");
            self.IsReadOnly(true);
            self.IsEditable(false);
        }
      }
    }

var ServerViewModel=函数（）{
//资料
var self=这个；
self.IsReadOnly=ko.observable（true）；//表单的输入模式
self.IsEditable=ko.observable（false）；//尝试：



编辑：Warappa在自动关闭的跨度上做得很好。击倒不喜欢它们。
谢谢你的提示，但是使用Server（）会出现javascript错误“Message:TypeError:Server不是一个函数.omg，我想应该是这样的--re:不应该使用自动关闭的跨度。我给了你这个答案。非常感谢。你不应该这样做。但是，如果你真的需要这样做，那么让
IsEditable
成为一个只返回
！IsReadOnly（）的计算属性是有意义的
从那时起，您就不必尝试保持它们的同步。我已经尝试过了，但可能因为自动关闭跨度问题而不起作用。
var ServerViewModel = function () {
    // Data
    var self = this;
    self.IsReadOnly = ko.observable(true);       // the form's input mode
    self.IsEditable = ko.observable(false);      // <<--- the workaround
    self.btnEditSave = ko.observable("Edit");    // the Edit/Save button text
    self.Server = ko.observable({});             // the Server object

    // Operations
    self.doEditSave = function () {
        var flag = self.IsReadOnly();
        if (flag) {
            // switch to Edit mode
            self.btnEditSave("Save");
            self.IsReadOnly(false);
            self.IsEditable(true);
        }
        else {
            // switch back to readOnly
            self.btnEditSave("Edit");
            self.IsReadOnly(true);
            self.IsEditable(false);
        }
      }
    }

 <span data-bind="text: Server.ServerName, visible: IsReadOnly"></span>
 <input data-bind="value: Server.ServerName, visible: !IsReadOnly()" maxlength="50" style="width:400px;" />