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,...as Serveris anと書くべきだと思いますobservable。

他のすべては私にはかなり正しいようです。

ところで：jsfiddleは大いに役立ちます。

編集：

jsfiddle をセットアップしました: http://jsfiddle.net/GRShn/1/

問題は、自己閉鎖スパンを作成することです。これは、自己閉鎖することはできません。の代わりwrite <span ...></span>に<span ... />、初期バージョンが機能します!

于 2013-01-24T21:19:37.467 に答える
0

最初の例が機能しなかった理由を特定できませんでしたが、解決策を見つけました。「IsReadOnly」の反対である別のプロパティ「IsEditable」を使用して、式が 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);
        }
      }
    }
于 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 に答える