Question

在我的应用程序中我正在使用淘汰赛。我有一组问题，每个问题都有一个类型，它决定了它将被渲染的组件（问题模板，见下文）。

我的问题是它将所有if语句呈现到页面中。所以我的页面只是if语句（这使得html页面的大小增加），这是空的。

Html示例：

<div data-bind="template: {name: 'questions', foreach: questions }">
<!-- ko if: type === "label" -->
<!-- ko template: { name: 'label_component' } -->
<div data-bind="visible: show, css: { root : isRoot }" class="root">
    <div data-bind="html: text, attr: {id: id}" id="1">Question text</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: type === "bool" --><!-- /ko -->
<!-- ko if: type === "multitext" --><!-- /ko -->
<!-- ko if: type === "text" --><!-- /ko -->
<!-- ko if: type == "number" --><!-- /ko -->
<!-- ko if: type === "dropdown" --><!-- /ko -->
<!-- ko if: type === "date" --><!-- /ko -->

.............

因此，您可以看到为1个组件呈现了7个不必要的if语句。

我的模板：

<div data-bind="template: {name: 'questions', foreach: questions }"></div>

<script id="questions" type="html/text">
    <!-- ko if: type === "label" -->
    <!-- ko template: { name: 'label_component' } --><!-- /ko -->
    <!-- /ko -->
    <!-- ko if: type === "bool" -->
    <!-- ko template: { name: 'radio_btn_component' } --><!-- /ko -->
    <!-- /ko -->
    <!-- ko if: type === "multitext" -->
    <!-- ko template: { name: 'multi_text_component' } --><!-- /ko -->
    <!-- /ko -->
    <!-- ko if: type === "text" -->
    <!-- ko template: { name: 'text_component' } --><!-- /ko -->
    <!-- /ko -->
    <!-- ko if: type == "number" -->
    <!-- ko template: { name: 'numeric_component' } --><!-- /ko -->
    <!-- /ko -->
    <!-- ko if: type === "dropdown" -->
    <!-- ko template: { name: 'dropdown_component' } --><!-- /ko -->
    <!-- /ko -->
    <!-- ko if: type === "date" -->
    <!-- ko template: { name: 'date_component' } --><!-- /ko -->
    <!-- /ko -->
</script>

所以我的问题：有没有办法解决？我可以以某种方式停止将那些未使用的if语句呈现到页面中吗？

谢谢大家的任何想法

Answer 1

非常感谢@gkb，我从不同角度看待它并提出这个解决方案。

<div data-bind="template: {name: 'questions', foreach: questions }"></div>

<script id="questions" type="html/text">
    <!-- ko template: { name: componentName() } --><!-- /ko -->
</script>

componentName是我的视图模型上的一个函数：

question.componentName = function() {

        switch (question.type) {
            case "label":
                return "label_component";
            case "bool":
                return "radio_btn_component";
            case "multitext":
                return "multi_text_component";
            case "text":
                return "text_component";
            case "number":
                return "numeric_component";
            case "dropdown":
                return "dropdown_component";
            case "date":
                return "date_component";
        }
        return "label_component";
    }

如果您有任何其他想法如何实现这一目标。请告诉我。

淘汰赛，太多无容器if语句

1 个答案: