Passing template name by condition using knockout

Question

If i have a div section with class container as below where i need to populate a template based on dropdown selected. How can i do that using knockout.js.

    <div class="container"></div>

    <!--Dropdown-->
    <select>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>

    <!--Templates-->
    <script type="text/html" id="A-template">
      <span data-bind="text:Value"></span>
    </script>
    <script type="text/html" id="B-template">
      <span data-bind="text:Value"></span>
    </script>
    <script type="text/html" id="A-template">
      <span data-bind="text:Value"></span>
    </script>

Answer 1

You can use a computed to calculate the template name:

this.SelectionTemplate = ko.computed(function() {
    return self.Value() + "-template";
});

Your template binding would look like this:

data-bind="template: { name: SelectionTemplate, data: $root }"

Here is a JSFiddle Sample: http://jsfiddle.net/6Shce/1/