Question

我希望根据model \ object状态设置不同的数据主题属性。在这里，我只是为数据主题属性（jQuery Mobile）设置'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'和'ko ifnot'更清洁的方法呢？

Answer 1

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

文档在这里：http://knockoutjs.com/documentation/template-binding.html#note_4_dynamically_choosing_which_template_is_used

Answer 2

我更喜欢使用自定义绑定来更改我的jquery移动主题。例如，根据true或false可观察值更改按钮的主题，以指示是否选择了按钮：

自定义绑定：

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/

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

2 个答案: