[英]KnockoutJS binding not updating with observable collection
我正在使用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>
我认为当你在测试条件下使用observable时,你需要正确调用它,否则你要求它解决的是js中是否可见是一个真正的条件,函数是:
<ul data-bind="foreach: items">
<li data-bind="style: { color: visible() ? 'red' : 'black'} ">X</li>
</ul>
这似乎在你的jsFiddle中为我解决了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.