如何在Knockout中选择性地绑定属性

How to selectively bind attributes in Knockout

本文关键字：绑定 属性 选择性 Knockout      更新时间：2023-09-26

我希望根据模型''对象状态设置不同的数据主题属性。这里我只是为数据主题属性（jQueryMobile）设置"b"或"d"。我可以使用它：

<!-- ko if: $data.id() == $parent.selectedMatchId() -->
    <li data-bind="text: $data.date" data-theme="b"></li>
<!-- /ko -->
<!-- ko ifnot: $data.id() == $parent.selectedMatchId() -->
   <li data-bind="text: $data.date" data-theme="d"></li>
<!-- /ko -->

这有点难看。我想（希望）我能在属性绑定器中使用一个表达式，但Knockout绑定引擎不喜欢我给它的

<li data-bind="text: $data.date,
      attr: {'data-theme' : $data.id() == $parent.selectedMatchId() : 'd' ? 'b'}"></li>

有没有比我使用的"ko if"answers"ko if not"更干净的方法？

您可以使用模板绑定。使用此绑定，您可以动态选择要使用的模板。

文件如下：http://knockoutjs.com/documentation/template-binding.html#note_4_dynamically_choosing_which_template_is_used

我更喜欢使用一个自定义绑定来更改我的jquery移动主题。例如，根据真实或错误的可观察值更改按钮的主题，以指示按钮是否被选中：

自定义绑定：

ko.bindingHandlers.jqmButtonTheme = {
    init: function (element, valueAccessor)
    {
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).buttonMarkup({ theme: 'b' }) : $(element).buttonMarkup({ theme: 'a' });
    },
    update: function (element, valueAccessor)
    {
        var value = valueAccessor();
        ko.utils.unwrapObservable(value) ? $(element).buttonMarkup({ theme: 'b' }) : $(element).buttonMarkup({ theme: 'a' });
    }
};

JSFiddle示例：

http://jsfiddle.net/RVLqJ/10/

相关文章：