2013-02-06 20 views
7

TrueまたはFalseのテーブル値に基づいて値を表示しようとしています。たとえば、ValueがTrueの場合、サポートされていると言いたい、Falseの場合はサポートされないと言いたい!これは、あなたが探している私のhtmlコードノックアウトjs if文ブール型データ型に基づいて値を表示

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

答えて

1

である何、この場合には、)(ko.computedされます。

EDITED:(サポートは、データセットからの値として使用中のように見える) 、あなたの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

+0

2つ目の解決策は機能しません。サポート変数を計算してから適切に計算する必要があります。それにかかわらず、ifバインディングは、この目的のために作成されたので、はるかに簡単です。 –

+0

Support()に関する改正をありがとう。私は余分なマークアップがマークアップを無駄にしている(とあまり乾燥していない)というアプローチを取ることを好みますが、あなたがどこに行く必要があるかは個人的には決まります。 –

+0

私はko.computedを使用しましたが、このエラーが発生します。Uncaught Error: 'write'オプションを指定しない限り、ko.computedに値を書き込めません。現在の値を読みたい場合は、パラメータを渡さないでください。 – BrianMichaels

1

あなたはドキュメントからの場合

参照ドキュメントを結合here

例であることを行うことができます。

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

編集:値のバインドを3値条件で使用することを提案している他の回答は、おそらくこれを達成するためのより良い方法です。これを参考にしておくつもりですが、その解決法をお勧めします。

7

このような場合、プロパティを評価して値に基づいてレンダリングすることができます。バインディングの内部に機能さえ提供することもできます。

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

KOは問題のこれらのタイプのために非常に有用である:私はこのようなKOブール条件を使用して、私の仕事で

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

:あなたはこれを使用することができます。

+0

もっと詳しく解説してください。あなたが提供するソリューション? – abarisone

+0

基本的には、位置(KOパラメータ)が値(KOパラメータでもあります)と異なる場合にのみ、div "visa"の表示を有効にしています。 位置が値と異なる場合は可視性がtrueになり、値が異なる場合はfalseになります – Matansh

関連する問題