Question

我第一次使用knockout.js（v2.2.1），并且我正在尝试构建一个表格，其中元素根据视图模型中的“IsReadOnly”属性在文本和输入字段之间切换。这是通过在表格单元格中的span和input标签上使用“visible”来完成的。

这是表格：

<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。

其他一切看起来都很合适。

BTW：jsfiddle会有很多帮助。

编辑：

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

问题在于您编写 自动关闭范围 - 无法自我关闭。只需write <span ...></span>代替<span ... />和您的初始版本！

Answer 2

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

表格行现在是：

<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);
        }
      }
    }

Answer 3

尝试：

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

编辑：Warappa在自我关闭范围内的好成绩。淘汰赛不喜欢他们。

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

3 个答案:

编辑：