javascript - knockout.js 可见绑定(bind)到表格单元格内容不起作用

Question

我是第一次使用 knockout.js (v2.2.1)，我正在尝试构建一个表，其中元素根据 View 模型中的“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>

和模型:

var ServerViewModel = function () {
    // Data
    var self = this;
    self.IsReadOnly = ko.observable(true);       // the form's input mode
    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);
        }
        else {
            // will eventually save the form data here...

            // switch back to readOnly
            self.btnEditSave("Edit");
            self.IsReadOnly(true);
        }
    }
}

一切都按预期切换，除了不显示输入字段。我已经尝试了各种形式的输入标签的“可见”表达式，但没有任何效果。我错过了什么？

Answer 1

我觉得你应该写...value: Server().ServerName,...和 ...text: Server().ServerName,...作为Server是一个 observable .

我觉得其他一切都很好。

顺便说一句:A jsfiddle会有很大帮助。

编辑:

我刚刚设置了一个 jsfiddle:http://jsfiddle.net/GRShn/1/

问题是您编写了一个自闭跨度 - 不能自闭。就write <span ...></span>而不是 <span ... />并且您的初始版本有效!