KnockoutJS绑定不更新与可观察集合

我使用KnockoutJS来创建一个简单的旋转动画。我有一些包含标题和描述的项目，我正在循环这些项目。KnockoutJS绑定不更新与可观察集合

在标题和描述下方，我显示了一些分页按钮，并且活动按钮应该有一个应用的样式。

但是，分页按钮的样式不会更新。目前，所有分页按钮都具有应用的样式，而不是仅对活动页面进行样式设置。我创建了一个显示我的问题的jsFiddle。

我在做什么错？

的JavaScript：

var AppViewModel = function() { 
    this.currentItem = ko.observable(); 
    this.items = ko.observableArray([ 
    new Item("titleA", "descriptionA"), 
    new Item("titleB", "descriptionB"), ]); 

    this.tick = function() { 
     var item = this.items.shift(); 
     if (item) { 
      item.visible(false); 
      this.items.push(item); 
     } 
     this.items()[0].visible(true); 
    }; 

    this.tick(); 
    setInterval(function() { 
     _this.tick(); 
    }, 1000); 
} 

var Item = function (title, description) { 
    this.title = title; 
    this.description = description; 
    this.visible = ko.observable(false); 
} 

ko.applyBindings(new AppViewModel());

HTML：

<div data-bind="foreach: items"> 
    <div data-bind="visible:visible"> <span data-bind="text: title"></span> 

     <blockquote data-bind="text: description"></blockquote> 
    </div> 
</div> 
<nav> 
    <ul data-bind="foreach: items"> 
     <li data-bind="style: { color: visible ? 'red' : 'black'} ">X</li> 
    </ul> 
</nav>

来源

2013-02-05 Wouter de Kort

我认为，当你在测试条件下用观察到的，你需要正确地调用它，否则你要求它解决是否可见是js中的一个真实情况，其功能是：

<ul data-bind="foreach: items"> 
    <li data-bind="style: { color: visible() ? 'red' : 'black'} ">X</li> 
</ul>

这似乎是为我在你的jsFiddle中修复它。

来源

2013-02-05 10:15:27

通过此更改，它仅将第一个X标记为红色。之后它不会更新分页样式。 –

这是因为Visible没有变化，没有机会解决为什么：http://jsfiddle.net/WgCJA/1/ –

但是上面的项目的可见属性被跟踪..你看到它从A到B.我不明白为什么页面按钮的可见不会更新.. –

KnockoutJS绑定不更新与可观察集合

回答

相关问题