knockout.js - How to update ui part rendered by template in knockoutjs -

knockout.js - How to update ui part rendered by template in knockoutjs -

i dynamically creating navigation list

self.navlist = ko.observablearray() self.generatenavlist = function () { self.navlist.push({ description: 'approval', link: '#approval-list-page', isactive: false }) self.navlist.push({ description: 'time', link: '#timesheet-list-page', isactive: true }) self.navlist.push({ description: 'expense', link: '#expense-list-page', isactive: false }) self.navlist.push({ description: 'requisition', link: '#requisition-list-page', isactive: false }) }

now method alter it

self.setactivelistitem = function (data) { ko.utils.arrayforeach(self.navlist(), function (item) { if (data.description == item.description) { item.isactive = true } else { item.isactive = false } }) homecoming true }

and html template

<nav data-bind="template:{name: 'navlist', foreach: $root.navlist}" class="sixteen columns alpha omega"></nav> <script type="text/html" id="navlist"> <a data-transition="slide" href="#" data-bind="text:description,attr:{href:link},click:$root.setactivelistitem,css:{active:isactive}"></a> </script>

now problem working on spa jquery mobile , knockoutjs. when click on item want set active. item not adding active class.

how can create active.

see fiddle here

never mind. have found solution this. need create isactive property observable.

self.generatenavlist = function () { self.navlist.push({ description: 'approval', link: '#approval-list-page', isactive: ko.observable(false) }) self.navlist.push({ description: 'time', link: '#timesheet-list-page', isactive: ko.observable(true) }) self.navlist.push({ description: 'expense', link: '#expense-list-page', isactive: ko.observable(false) }) self.navlist.push({ description: 'requisition', link: '#requisition-list-page', isactive: ko.observable(false) }) }

fiddle

templates knockout.js