Knockoutjs tmpl & data-bind

by homer2

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<!--<span data-bind="foreach: years">
    <span data-bind="text: year"></span>
</span><p>-->
<button>name</button> <span id="name"></span>
<input data-bind="value: name" /><br/>
tmpl: <span id="tmpl"></span>
<br/>
data-bind: <span data-bind="text: name()"></span>
<br/>
bindTest: <span data-bind="template: 'bindTest'"></span>

<script type="text/html" id="bindTest">
    <b>${name}</b>
</script>

JavaScript

var dataFromServer = {"Years": [{"value": 2001},{"value": 2002},{"value": 2003}]};
var bindData = {"name": "Homer"};

$(function() {
    
    function Person(name){
        var self = this;
        
        self.name = ko.observable(name);
    }

    function Year(year) {
        var self = this;
        self.year = year.value;
    }

    function YearsVM(data) {
        var self = this;        
        self.years= ko.observableArray(ko.utils.arrayMap(data, function(year) {
            return new Year(year);
        }));
        
        self.name = ko.observable("Homer");
    }

    //ko.applyBindings(new YearsVM(dataFromServer.Years));
    
    var viewModel = { name: ko.observable("Homer") };
    ko.applyBindings(viewModel);

    
    $( "#bindTest" ).tmpl(bindData).appendTo( "#tmpl" );
    
    $("button").click(function(){
        $("#name").text(viewModel.name());
    });
    
});