knockout, too many containerless if statements

Question

in my application I am using knockout. I have a set of questions, and every question has a type, which determines the component in which it will be rendered (questions template, see below).

And my problem is that it renders all the if statements into page. So my page is just full of if statements(which makes the html page grow in size), which are empty.

Html example:

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

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

So you can see there is 7 unnecessary if statements rendered for 1 component.

My template:

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

So my question: Is there any way around this? Can I get somehow stop rendering those unused if statements into page?

Thank you all for any ideas

Answer 1

So thanks to @gkb, I look at it from different perspective and come up with this solution.

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

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

And componentName is a function on my view model:

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 you have any other ideas how this could be achieved. Please let me know.