JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<div id="QdetailsDiv">
<div>
<div>
<div><span>Sold to Account</span></div>
<div>
<input type="text" id="txtSoldToAccount" data-bind="value:SoldToAccount"/>
</div>
</div>
<div>
<div><span>Job Name</span></div>
<div>
<input type="text" id="txtQDJobName" data-bind="value:jobName"/></div>
</div>
</div>
<input type="button" value="unbind" id="unbindbutton"></input>
</div>
JavaScript
QuoteDetails = function () {
var self = this;
self.SoldToAccount = ko.observable();
self.jobName = ko.observable();
};
function SimpleSearchResults() {
var self = this;
self.index = ko.observable();
self.quoteDetailsObj= null;
self.BindDataToQuotesDetailVM = function () {
self.quoteDetailsObj = new QuoteDetails();
self.quoteDetailsObj.SoldToAccount("SoldToAccount test");
self.quoteDetailsObj.jobName("jobName test");
ko.applyBindings(self.quoteDetailsObj, document.getElementById("QdetailsDiv"));
};
};
function QuoteSimpleSearchVM() {
var self = this;
self.simpleSearchResultsArray = ko.observableArray([]);
var SimpleSearchResultsObj= new SimpleSearchResults();
SimpleSearchResultsObj.index=ko.observable("1");
self.simpleSearchResultsArray.push(SimpleSearchResultsObj);
var SimpleSearchResultsObj2= new SimpleSearchResults();
SimpleSearchResultsObj2.index=ko.observable("2");
self.simpleSearchResultsArray.push(SimpleSearchResultsObj2);
};
var obj= new QuoteSimpleSearchVM();
$(document).ready(function () {
$("#unbindbutton").click(function(){
var element = $('#QdetailsDiv')[0];
ko.cleanNode(element);
});
console.log('ok');
ko.utils.arrayForEach(obj.simpleSearchResultsArray(), function (SimpleSearchResultsObj) {
if (SimpleSearchResultsObj.index() === "2") {
SimpleSearchResultsObj.BindDataToQuotesDetailVM(obj);
}
});
});