[英]KnockoutJS binding not updating with observable collection
I am using KnockoutJS to create a simple rotate animation. 我正在使用KnockoutJS来创建一个简单的旋转动画。 I have some items that contain a title and a description and I'm cycling trough these items. 我有一些包含标题和描述的项目,我骑自行车通过这些项目。
Beneath the title and description I show some paging buttons and the active button should have a style applied. 在标题和描述下面,我显示了一些分页按钮,活动按钮应该应用了一个样式。
However, the style for the paging button is not updated. 但是,不更新分页按钮的样式。 Currently all paging buttons have the style applied instead of only styling the active page. 目前,所有分页按钮都应用了样式,而不是仅对样式化活动页面进行样式化。 I have created a jsFiddle that shows my problem. 我创建了一个显示我的问题的jsFiddle 。
What am I doing wrong? 我究竟做错了什么?
JavaScript: 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: 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>
I think that when you are using an observable in a test condition, you need to call it properly, as otherwise what you asking it to resolve is whether visible is a truthy condition in js, which a function is: 我认为当你在测试条件下使用observable时,你需要正确调用它,否则你要求它解决的是js中是否可见是一个真正的条件,函数是:
<ul data-bind="foreach: items">
<li data-bind="style: { color: visible() ? 'red' : 'black'} ">X</li>
</ul>
This seems to fix it for me in your jsFiddle. 这似乎在你的jsFiddle中为我解决了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.