如何在Knockout中選擇性綁定屬性

Question

我希望根據模型\對象狀態設置不同的數據主題屬性。 在這裏，我只是爲數據主題屬性（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 Mobile的主題自定義綁定。例如，改變基於關閉真或假觀察到的值的按鈕的主題，以指示該按鈕被選擇或不：

自定義綁定：

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/