Knockout.js 条件绑定

Posted 2023-03-27

【中文标题】Knockout.js 条件绑定

【英文标题】：Knockout.js conditional binding

【发布时间】：2012-09-16 00:29:03

【问题描述】：

如何根据其他属性进行条件绑定？

例子..

变量视图模型 = IsAdded = ko.observable(), AdditionalBy = ko.observable()

当我显示它时.. 如果 IsAddedBy 为 null 或 false，我不想显示 AdditionalBy

像这样..

&ltinput type="text" data-bind="value: if (IsAdded != null && IsAdded) addedBy "/>

我知道这是不对的，但是类似的事情......

【问题讨论】：

你想隐藏整个输入框，还是不填充它？如果您想完全隐藏它，请查看 Visible 绑定。如果您不想填充它，那么蒂姆的答案就是要走的路

【参考方案1】：

我会做的就是这个；

var ViewModel = function() 
    this.IsAdded = ko.observable('True');
    this.AddedBy = ko.observable('Test');
    this.AddedByText = ko.computed(function()
        if ( this.AddedBy() != null && this.IsAdded() ) return this.AddedBy()
        return "";
    , this);

那么你的输入将是

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

这样您就可以将逻辑包含在 ViewModel 中并与 html 分开。

【参考方案2】：

这个问题很老，但它可能有助于其他人寻找

<input type="text" data-bind="value: IsAdded ? AddedBy : "" "/>

如果 IsAdded 不为空，则将 value 设置为 AdditionalBy，否则什么也不做