TemplatesHowTo

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js"></script>
<div id="tagsList" class="box">
    <div class="box-head">
        <h2 class="left">Tags</h2>
    </div>

    <div class="box-content">
        <input type="text" placeholder="Add New Tag" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown'" />
        <button data-bind="click: addTag">
            + Add
        </button>

        <ul data-bind="template: { name: 'tagsTemp1', foreach: tags }">
            
        </ul>
        <!--div data-bind="template: 'tagsTemp1'"></div-->
   </div>
</div>

 <script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>    
</script>

<script id="tagsTemp1" type="text/html">
    <ul>
        
        <li class="tagItem">
            <span>${Name} ${(new Date).toLocaleTimeString()}</span>
            <div>
                <a href="#" class="tag-edit">Edit</a>
                <a href="#" class="tag-delete">Delete</a>
            </div>
        </li>
      
    </ul>
</script>

JavaScript

$(function() {
    
     var data = [
        { Id: 1, Name: "Ball Handling" },
        { Id: 2, Name: "Passing" },
        { Id: 3, Name: "Shooting" },
        { Id: 4, Name: "Rebounding" },
        { Id: 5, Name: "Transition" },
        { Id: 6, Name: "Defense" },
        { Id: 7, Name: "Team Offense" },
        { Id: 8, Name: "Team Defense" }

        ];



    var viewModel = {
        tags: ko.observableArray(data),
        tagToAdd: ko.observable(""),

        //behaviors
        addTag: function () {

            this.tags.push({ Name: this.tagToAdd() });
            this.tagToAdd("");
            
        }


    };

    ko.applyBindings(viewModel);
    
   });