Dynamically add and bind with KO

by tlarson

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="originalStuffInDom">
   <div data-bind="text:firstName"></div>
</div>
<div id="newStuffGoesHere">
</div>
<button data-bind="click:addStuffToDOM">Add Stuff to DOM</button>

JavaScript

var vm = function(){
    var self = this;
    self.firstName = "John";
    self.lastName = "Doe";
    self.addStuffToDOM = function() {        
        $("#newStuffGoesHere").append("<div data-bind='text:lastName'></div>");
        var newStuffAddedToDom = $("#newStuffGoesHere")[0];
        ko.applyBindings(self, newStuffAddedToDom);
    }
}

ko.applyBindings(new vm());