淘汰賽，太多的無容器if語句

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 --> 

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

所以你可以看到有7不必要的，如果呈現1所組成的語句。

我的模板：

<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> 

和組件名是我的視圖模型的函數：

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"; 
    } 

如果您有任何其他的想法如何可以實現。請告訴我。