2013-02-06 65 views
7

我試圖顯示基於的真或假的表值的值顯示值。例如,如果值爲真,那麼我希望它說支持,如果它是假的,那麼我希望它說不支持!這是我的html代碼淘汰賽JS if語句根據布爾數據類型

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

的Java Script代碼

$(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()。

編輯:(支持似乎是在用從數據集中的值) 一個新值添加到您的視圖模型,這樣的事情:

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> 

我推薦前者,但是,如真的,你應該保持這種邏輯視圖模型的內部侷促。

(見KO文檔的更多信息的計算:http://knockoutjs.com/documentation/computedObservables.html

+0

您的第二個解決方案將不起作用,Support變量需要()以後才能正確計算。無論如何,if綁定更直接,因爲它是爲此目的而創建的。 –

+0

感謝您對Support()的修改。我更喜歡採取這樣的方法,即個人額外標記是浪費標記(而不是非常乾燥),但取決於您需要去的地方。 –

+0

我使用了ko.computed,我得到這個錯誤 - 未捕獲的錯誤:除非指定'寫入'選項,否則無法將值寫入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> 

編輯:其他的答案使用值與三元條件結合暗示可能是一個更好的方式來做到這一點。我會繼續作爲參考,但我建議該解決方案。

7

在這種情況下,您可以根據該值評估屬性並進行渲染。甚至可以在綁定中提供一個函數。您可以使用此:

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

在我的工作中,我用KO布爾條件是這樣的:

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

KO是這些類型的問題是非常有用的。

+0

請您詳細說明您的答案,然後再添加一些關於您提供的解決方案 – abarisone

+0

基本上,只有當位置(KO參數)不同於值(也可以是KO參數)時,才能啓用div「bla」的可見性。 如果位置與值不同,則可見性將變爲真;如果位置不同,則變爲假 – Matansh