Does KnockoutJS Support Polymorphic View Models?

https://groups.google.com/d/topic/knockoutjs/RzaJaoFN_s0/discussion

by photo_tom

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<ul data-bind="template: { name: 'thingTmpl', foreach: things }"></ul>

<script id="thingTmpl" type="text/html">
    <li>
        <div class="common">
            ID: <input data-bind="value: id" />
            Name: <input data-bind="value: name" />
        </div>
        <div class="type" data-bind="template: { name: function(thing) { return thing.type + 'tmpl'; }, data: $data }"></div> 
    </li>
</script>

<script id="Atmpl" type="text/html">
    <h2>A properties</h2>
    A1: <input data-bind="value: propertyA1" />
    A2: <input data-bind="value: propertyA2" />
</script>

<script id="Btmpl" type="text/html">
    <h2>B properties</h2>
    B1: <input data-bind="value: propertyB1" />
    B2: <input data-bind="value: propertyB2" />   
</script>

<script id="Ctmpl" type="text/html">
    <h2>C properties</h2>
    C1: <input data-bind="value: propertyC1" />
    C2: <input data-bind="value: propertyC2" />    
</script>

CSS

div { padding: 5px; margin: 5px; }
.type { background-color: #CCC; margin-left: 20px; border: solid 1px black; }
.common { background-color: #EEE; border: solid 1px black; }

JavaScript

var viewModel = {
    things: ko.observableArray([
        { id: 1, name: "One", type: "A", propertyA1: "1_A1", propertyA2: "1_A2" },
        { id: 2, name: "Two", type: "B", propertyB1: "2_B1", propertyB2: "2_B2" },
        { id: 3, name: "Three", type: "C", propertyC1: "3_C2", propertyC2: "3_C2" },
        { id: 4, name: "Four", type: "A", propertyA1: "4_A1", propertyA2: "4_A2" }
    ])
};

ko.applyBindings(viewModel);