7

True または False のテーブル値に基づいて値を表示しようとしています。たとえば、値がTrueの場合はサポートされていると言い、Falseの場合はサポートされていないと言いたいです! これは私のhtmlコードです

<p><input type="text"  data-bind="value: Support"  /></p>

Java スクリプト コード

$(function() {
  dm.viewModel = function() {
    var clients = ko.observableArray(),
      selectedClient = ko.observable(),

      clientChanged = function() {
        $.getJSON(dm.WebServices + "/dm/get/clientinfo?client=" + encodeURIComponent(selectedClient()), function(data) {
          if (data != null) {
            dm.viewModel.Name(selectedClient());
            dm.viewModel.Support(data[0]['Support']);
          }
        })
        $('#divClientData').show();
      },

      LoadClients = function() {
        $('#divClientData').hide();
        $.getJSON(dm.WebServices + "/dm/get/clientlist", function(data) {
          $.each(data, function(key, val) {
            clients.push(val);
          });
        });
      },

      Name = ko.observable(),
      Support = ko.observable(),

      return {
        Name: Name,
        Support: Support
      };
  }();

  ko.applyBindings(dm.viewModel);
  dm.viewModel.LoadClients();
})
4

4 に答える 4

8

このような場合、プロパティを評価し、値に基づいてレンダリングできます。関数をバインド内に提供することもできます。これを使用できます：

<input type="text"  data-bind="value: Support() ? 'Supported' : 'Not Supported'"  />
于 2013-02-06T20:00:34.093 に答える
1

この場合、探しているのは ko.computed() です。

編集済み: (サポートはデータ セットの値として使用されているようです) ViewModel に次のような新しい値を追加します。

IsSupported = ko.computed(function(){
    if(this.Support() == true){
        return "Supported";
    } else {
        return "Not Supported";
    }
}, this)

次に、マークアップで、データ バインドをわずかに変更する必要があります。

<p><input type="text" data-bind="value: IsSupported" /></p>

または、サポートフィールドを変更したくない場合は、他のコメント投稿者が示唆しているように、HTML で次のようにする必要があります。

<p><input type="text"  data-bind="value: (Support() ? 'Supported' : 'Not Supported')"  /></p>

前者をお勧めしますが、実際には、そのロジックを ViewModel 内に隠しておく必要があります。

(計算の詳細については、KO ドキュメントを参照してください: http://knockoutjs.com/documentation/computedObservables.html )

于 2013-02-06T19:41:42.223 に答える
1

ifバインディングでそれを行うことができます

こちらのドキュメントを参照してください

ドキュメントの例:

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>

<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>

だからあなたのために

<div data-bind="if: Support">Supported</div>
<div data-bind="ifnot: Support">Not Supported</div>

編集：三項条件で値バインディングを使用することを提案する他の回答は、おそらくこれを達成するためのより良い方法です。参考程度にとどめておきますが、その解決策をお勧めします。

于 2013-02-06T19:48:58.153 に答える
0

私の仕事では、次のような KO ブール条件を使用します。

<div id="bla" data-bind="visible: position != value"></div>

KO は、この種の問題に非常に役立ちます。

于 2015-04-14T13:44:27.360 に答える