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