如何根据条件更改绑定处理程序？

Question

我想根据条件对 table 列使用不同的绑定处理程序，例如：

<tbody data-bind="foreach: plansList">
    <tr>
        <td data-bind="numVotes > 0 ? (html: voteOptionLinked) : (text: voteOption)"></td>

在一种情况下，我想使用 html 处理程序绑定一个 link，但在另一种情况下，我只想使用 text 处理程序显示它。以上不起作用，因为 handler: 必须出现在 data-bind 属性的开头，但有没有办法在 Knockout 中做到这一点？

Answer 1

一个解决方法，但它实现了你想要的：

<tr>
    <!-- ko if: numVotes() > 0 -->
        <td data-bind="html: voteOptionLinked"></td>
    <!-- /ko -->
    <!-- ko ifnot: numVotes() > 0 -->
        <td data-bind="text: voteOption"></td>
    <!-- /ko -->
</tr>

Answer 2

您可以使用自定义绑定：

ko.bindingHandlers.customBinder = {
    init: function(element, valueAccessor, allBindings) {
        
    },
    update: function(element, valueAccessor, allBindings, viewModel) {
        var numVotes = valueAccessor();
        if (numVotes() > 0){
          var html = viewModel.voteOptionLinked;
          element.innerHTML = html;
        }
        else {
          var text = viewModel.voteOption;
          element.textContent = text;
        }
    } 
};

// ----------------------------------------------------------------------------
// Page viewmodel



function SurveyViewModel() {
    this.numVotes = ko.observable(4);
    this.voteOptionLinked = '<span>ab</span><span>dfsdf</span>';
    this.voteOption = 'zzzzzz';
}

ko.applyBindings(new SurveyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="customBinder:numVotes">

</div>

如何根据条件更改绑定处理程序？

How do change binding handler based on a condition?

html

javascript

data-binding

knockout.js