Here

Question

我正在动态创建这样的导航列表

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 })
}

现在改变它的方法

self.SetActiveListItem = function (data) {
    ko.utils.arrayForEach(self.NavList(), function (item) {
        if (data.Description == item.Description) {
            item.IsActive = true
        } else {
            item.IsActive = false
        }
    })
    return true
}

和html模板

<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>

现在的问题是我正在使用Jquery mobile和knockoutjs开发SPA。当我点击一个项目时，我想将其设置为活动状态。但该项目未添加活动类。

如何让它激活。

查看小提琴

Here

Answer 1

没关系。我找到了解决方案。我需要使IsActive属性可观察。

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) })
}

如何更新knockoutjs中模板呈现的ui部分

Here

1 个答案:

Fiddle