New

by rniemeyer

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<div data-bind="template: 'main1'"></div>
<script id="main1" type="text/html">
    {{if items() && items().length > 0}}
    <div class="items">
        <h3>Items {{now}}</h3>
        <ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>
    </div>
    {{/if}}
    <a href="javascript: void(0)" data-bind="click: addItem">Add Item</a>
</script>

<script id="itemTmpl" type="text/html">
    <li><span data-bind="text: name"></span> <a href="javascript: void(0);" data-bind="click: function() { viewModel.deleteItem($data); }" > Delete </a> {{now}}</li>
</script>

CSS

a { font-size: .75em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; font-weight: bold; }

JavaScript

$(function() {
    ko.applyBindings(viewModel);
});

var viewModel = {
    items: ko.observableArray([{
        id: 1,
        name: "Pencil"},
    {
        id: 2,
        name: "Pen"},
    {
        id: 3,
        name: "Eraser"}]),
    addItem: function() {
        this.items.push({
            id: this.items().length + 1,
            name: "new"
        });
    },
    deleteItem: function(item) {
        this.items.remove(item);
    },
    hasItems: ko.observable(true)
};

//only change hasItems when we cross between 0 and 1 items
viewModel.items.subscribe(function() {
    var current = viewModel.hasItems();
    var actual = viewModel.items() && viewModel.items().length > 0;
    if (current != actual) {
        viewModel.hasItems(actual);
    }
}, viewModel);

$.extend(jQuery.tmpl.tag, {
    now: {
        open: '__=__.concat((" -rendered at: " + (new Date()).toLocaleTimeString()));'
    },
});