knockout.js - Binding JQuery Tabs Using Knockout JS -

knockout.js - Binding JQuery Tabs Using Knockout JS -

i have viewmodel this:

function viewmodel() { var self = this; self.tab = function (id, name, text, selected) { var tab = this; tab.id = ko.observable(id); tab.name = ko.observable(name); tab.text = ko.observable(text); homecoming tab; }; self.selectedtab = ko.observable(1); self.tabs = new array(); self.tabs.push(new self.tab(1, 'tab 1', 'tab 1 content')); self.tabs.push(new self.tab(2, 'tab 2', 'tab 2 content')); self.tabs.push(new self.tab(3, 'tab 3', 'tab 3 content')); self.tabs.push(new self.tab(4, 'tab 4', 'tab 4 content')); homecoming self; } ko.applybindings(new viewmodel(), document.getelementbyid("tabdiv"));

and related html follows:

<div id="tabdiv"> <div id="tabs" data-bind="foreach: tabs"> <div class="tab" data-bind="css: {selected: $parent.selectedtab() == id()}, text: name, click: $parent.selectedtab.bind($parent, id())"> </div> </div> <div id="tabcontent" data-bind="foreach: tabs"> <div data-bind="if: $parent.selectedtab() == id()"> <span data-bind="text: text"></span> </div> </div> </div>

now,i have viewmodel follows:

var projectviewmodel = { ........ addemployee: function (data, event) { $('.chklist').each(function () { //here want generate tab }); } };

the checkbox list binded 1 of observable array of projectviewmodel working fine. trying is,on click of checkbox within checkbox list, generate tab(similar jquery ui tab).

you can see 4 tab values inserted statically working perfectly. getting tab expected. not able force values within projectviewmodel's addemployee function tabs array in viewmodel. don't know how process self.tabs.push(new self.tab(.....)); outside viewmodel.

any help appreciated.

you can utilize ko.datafor() access view-model:

addemployee: function (data, event) { var vm = ko.datafor(document.getelementbyid("tabdiv")); vm.tabs.push(new vm.tab(5, 'new tab', 'new tab content')); }

alternatively, can expose view-model global scope access everywhere:

window.tabsvm = new viewmodel(); ko.applybindings(window.tabsvm, document.getelementbyid("tabdiv"));

then:

addemployee: function (data, event) { var vm = window.tabsvm; vm.tabs.push(new vm.tab(5, 'new tab', 'new tab content')); }

also, you'll have alter tabs array observable-array if want changes update dom automatically:

self.tabs = ko.observablearray();

jquery-ui knockout.js