knockout js if statement to Display value dựa trên kiểu dữ liệu boolean

Question

Tôi đang cố gắng Hiển thị một giá trị dựa trên giá trị bảng của True hoặc False. Ví dụ: nếu Giá trị là True thì tôi muốn nó Nói được hỗ trợ và Nếu đó là False thì tôi muốn nó Nói không được hỗ trợ! Đây là mã html của tôi

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

Java script Mã

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

Answer 1

Những gì bạn đang tìm kiếm, trong trường hợp này, được ko.computed().

EDITED: (Hỗ trợ dường như là trong sử dụng như một giá trị từ tập dữ liệu) Thêm một giá trị mới cho ViewModel của bạn, một cái gì đó như thế này:

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

Sau đó, trong đánh dấu của bạn, bạn sẽ phải thay đổi ràng buộc dữ liệu của bạn chỉ một chút:

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

Ngoài ra, nếu bạn không muốn thay đổi trường Hỗ trợ, bạn sẽ phải thực hiện điều này trong HTML, như đề xuất của người nhận xét khác:

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

Tôi khuyên bạn nên sử dụng tên cũ, tuy nhiên, thực sự, bạn nên giữ logic đó ẩn bên trong ViewModel của mình.

(Xem tài liệu KO để biết thêm về tính: http://knockoutjs.com/documentation/computedObservables.html)

Answer 2

Bạn có thể làm điều đó với nếu ràng buộc

Xem tài liệu here

Ví dụ từ các tài liệu:

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

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

Vì vậy, dành cho bạn

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

Chỉnh sửa: Các câu trả lời khác cho thấy việc sử dụng giá trị ràng buộc với điều kiện bậc ba có lẽ là cách tốt hơn để thực hiện việc này. Tôi sẽ giữ điều này như là một tài liệu tham khảo, nhưng tôi đề nghị giải pháp đó.

Answer 3

Trong trường hợp này, bạn có thể đánh giá thuộc tính và hiển thị dựa trên giá trị. Ngay cả một hàm có thể được cung cấp bên trong ràng buộc. Bạn có thể sử dụng này:

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

Answer 4

Trong tác phẩm của tôi, tôi sử dụng KO điều kiện boolean như thế này:

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

KO là rất hữu ích cho những loại vấn đề.