Question

我想要简单的重复if / else语句。该语句的目的是为项目呈现正确的元素和绑定。

代码中最重复的部分是自动完成。

<div>
    <!-- ko if: type === 'text' -->
        <!-- ko if: hasAutocomplete() -->
            <input data-bind="textInput: val, autocomplete: { data: choices, other_parameters... }" />
        <!-- /ko -->

        <!-- ko ifnot: hasAutocomplete() -->
            <input data-bind="textInput: val" />
        <!-- /ko -->
    <!-- /ko -->

    <!-- ko if: type === 'date' -->
        <!-- ko if: hasAutocomplete -->    
            <input data-bind="dateInput: val, autocomplete: { data: choices, other_parameters... }" />
        <!-- /ko -->

        <!-- ko ifnot: hasAutocomplete -->    
            <input data-bind="dateInput: val" />    
        <!-- /ko -->
    <!-- /ko -->

    etc...

</div>

更新解决方案

我正在考虑的解决方案是

1.如果autocomplete为真，请创建一个通过调用applyBindingsToNode添加hasAutocomplete绑定的绑定：

<input data-bind="dateInput: val, optionalautocomplete" />

2.使用模板而不是if binding（感谢U10！）

这是正确的解决方案吗？还有其他建议吗？

Answer 1

我看到的一个可能的解决方案是使用模板：

<div data-bind="template: { name: type() + hasAutocomplete() ? '-autocomplere': '', data: buyer }"></div>

<script type="text/html" id="text">
     <input data-bind="textInput: val" />
</script>

<script type="text/html" id="text-autocomplete">
     <input data-bind="textInput: val, autocomplete: { data: choices }" />
</script>

<script type="text/html" id="date">
     <input data-bind="dateInput: val" />
</script>

<script type="text/html" id="date-autocomplete">
     <input data-bind="dateInput: val, autocomplete: { data: choices }" />
</script>

或移动模板选择计算如下：

this.templateName= ko.computed(function() {
    return type() + hasAutocomplete() ? '-autocomplere': '';
}, this);

另一种可能的解决方案是创建custom element。

Knockout减少if / else重复

1 个答案: