0

如果 a 的索引与单击的标签div不匹配，则尝试“禁用” a ：a

<div data-bind="foreach: slides" class="slidebtns">
    <a class="slidebtn" data-bind="text: title, click: $parent.activeIndex.bind($data, $index())" href="#"></a>
</div>

<div data-bind="foreach: slides">
    <div class="screen" data-bind="attr: { id: title }, disable: $parent.activeIndex() !== $index">
        <div>test</div>
    </div>
</div>

CSS：

... .disabled {
    display: none;
}

JS：

function viewModel() {
    var self = this;
    self.activeIndex = ko.observable(0);
    self.numSlides = ko.observable(3);

    ...

    self.slides = ko.computed(function() {
        var arr = [], n;
        if (self.numSlides()<6) n = self.numSlides();
        else n = 5;
        for (var i=0; i<n; i++) {
            arr.push(slideModel(i));
        }
        return arr;
    });
}

function slideModel(n) {
    var self = this;
    self.includeImage = ko.observable(true);
    self.imageSrc = ko.observable('slide_bg1.jpg');
    return { title: 'slide'+(n+1) };
}

ko.applyBindings(new viewModel());

这是行不通的。每个人都会div接受一disabled堂课。

作为测试，我将最后一个 div 更改为以下内容，以确保 activeIndex 在单击时实际正确更新（确实如此）：

<div class="screen" data-bind="attr: { id: title }, css: $root.activeIndex() !== $index ? 'disabled' : ''">
    <div data-bind="text: $root.activeIndex()"></div>
</div>

但是，我对 KO 来说太陌生了，无法弄清楚如何在a单击 .slidebtn 时额外输出屏幕 $index 所以我实际上可以检查索引是否相等（无论如何，它们应该相等，因为每个元素只有 3 个在容器内输入）。

4

2 回答 2

0

除了 PW Kad 提到的其他问题：slideModel()没有做你认为它做的事情，因为你开始编写它时好像它是一个应该用 调用的“经典”构造函数new，但你不会那样调用它。结果，它内部self实际上将是全局对象（因为在不作为构造函数或方法调用的函数中，this是指全局对象）。因此，您实际上是在设置全局变量includeImage，并且imageSrc每次调用它。

代替

return { title: 'slide'+(n+1) };

和

self.title = 'slide'+(n+1);

并调用它new（在这种情况下，您应该将其重命名为，SlideModel因为标准约定是经典构造函数以大写开头以提醒您需要使用new），或者替换

var self = this;

和

var self = {};

并以

return self;

并继续以您当前的方式调用它。

于 2013-10-16T16:26:24.543 回答
0

只需添加一个禁用绑定，它将为您的元素提供该类而无需任何魔术 -

<div data-bind="disable: $parent.activeIndex() !== $index"></div>

您可以添加一个元素来让您知道它们是否实际上是相同的值也有助于调试。

<div><span data-bind="text: $parent.activeIndex()"></span> equals<span data-bind="text: $index"></span>?</div>

编辑

上面的答案是如果您使用的是禁用的 HTML 属性，而不是“禁用”类。您将使用此选择器应用 CSS -

div:disabled {
    display: none;
}

如果您必须为此使用一个类，那么您将使用之前提到的 CSS 绑定处理程序 -

<div data-bind="css: { disabled: $root.activeIndex() !== $index ? }"></div>

但是，所有这一切都说，如果您想在不匹配的情况下隐藏它，那么只需使用可见绑定 -

<div data-bind="visible: $parent.activeIndex() !== $index"></div>
于 2013-10-14T19:30:47.887 回答