Question

我正在尝试根据表值True或False显示值。例如，如果Value为True，那么我希望它说Say Supported，如果它是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();
})

Answer 1

在这种情况下，您可以评估属性并根据值进行渲染。甚至可以在绑定内部提供功能。你可以用这个：

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

Answer 2

在这种情况下，你要找的是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）

Answer 3

你可以使用if binding

来做到这一点

请参阅文档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>

编辑：其他答案建议使用三元条件的值绑定可能是实现此目的的更好方法。我会将此作为参考，但我建议使用该解决方案。

Answer 4

在我的工作中，我使用像这样的KO布尔条件：

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

KO对这些类型的问题非常有用。

knockout js if statement to显示基于布尔数据类型的值

4 个答案: