1

我第一次使用 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>

和模型：

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

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

4

3 回答 3

2

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

其他一切对我来说似乎都很合适。

顺便说一句：一个jsfiddle会很有帮助。

编辑：

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

问题是你写了一个自闭合的跨度——它不能是自闭合的。只是write <span ...></span>代替<span ... />并且您的初始版本有效！

于 2013-01-24T21:19:37.467 回答
0

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

表格行现在是：

<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);
        }
      }
    }
于 2013-01-24T21:31:27.207 回答
0

尝试：

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

编辑：Warappa 在自动闭合跨度上的成功。淘汰赛不喜欢他们。

于 2013-01-24T21:44:15.073 回答