binding dynamic content

https://groups.google.com/d/topic/knockoutjs/FhR9BlaEfoY/discussion

by David Underwood

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<div id="main">
    <div data-bind="text: first"></div>
    <div data-bind="text: last"></div>
    <hr />
    <button data-bind="click: addDynamicContent">Add DynamicContent</button>    
</div>

JavaScript

var viewModel = {
    first: ko.observable("Bob"),
    last: ko.observable("Smith")
};

viewModel.fullName = ko.dependentObservable(function() {
    return this.first() + " " + this.last();
}, viewModel);

function addDynamicContent() {
    $("#main").append("<div id='dynamic' data-bind='text: fullName'></div>");
    ko.applyBindings(viewModel, $("#dynamic")[0]);
}

ko.applyBindings(viewModel);