CustomBinding Issue

by soniiic

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div id="container" data-bind="with: selectedModel">
    <div data-bind="custom: $data">
    </div>
</div>

<button data-bind="click: update">Update</button>
<button data-bind='click: setModel1'>Set Model1</button>
<button data-bind='click: setModel2'>Set Model2</button>

<script id='test' type='html/template' charset='utf-8'>
<span data-bind='text: name'></span>
</script>

CSS

.val { font-weight: bold; }
td, th { margin: 2px; padding: 2px; border: solid 1px black; }
th { background-color: #333; color: #fff; }

JavaScript

ko.bindingHandlers.custom = {
    update: function(element, valueAccessor) {
        console.log("BAM!");
        while (element.firstChild)         
            ko.removeNode(element.firstChild);
        
        ko.renderTemplate('test', valueAccessor(), {}, element, 'replaceNode');

    }  
};


var innerModel = {
    name: ko.observable('junk')
};
    
var innerModel2 = {
    name: ko.observable('junk2')
};
    
var viewModel = {
    im1: innerModel,
    im2: innerModel2,
    selectedModel: ko.observable({name:'xxx'})
};

var dataFromServer = { name: "Bob" };

function update() {
     //ko.mapping.fromJS(dataFromServer, null, viewModel.innerModel);
    viewModel.im1.name(dataFromServer.name);
    dataFromServer.name = dataFromServer.name + "!";
}

function setModel1() {
    viewModel.selectedModel(viewModel.im1);
}

function setModel2() {
    viewModel.selectedModel(viewModel.im2);
}

viewModel.selectedModel.subscribe(function(newValue) {
    console.log(newValue.name());
});

ko.applyBindings(viewModel);