Knockout - Containerless control of flow

by johnpapa

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<h3>Products</h3>

<ul>
    <li><strong>Here is a static header item</strong></li>
    <!-- ko foreach: products -->
    <li>
        <em data-bind="text: name"></em>
        <!-- ko if: manufacturer.company === "Sony" -->        
            &mdash; made by <span data-bind="text: manufacturer.company"></span>
        <!-- /ko -->
    </li>
    <!-- /ko -->
</ul>

JavaScript

function vm() {
    this.products = ko.observableArray([
        {
        name: "XBox",
        manufacturer: {
            company: "Microsoft"
        }},
    {
        name: "PlayStation",
        manufacturer: {
            company: "Sony"
        }},
    {
        name: "Banana",
        manufacturer: null},
    {
        name: "Wii",
        manufacturer: {
            company: "Nintendo"
        }}
    ]);
};

ko.applyBindings(new vm());