Question

尝试＆＃34;禁用＆＃34; div如果其索引与点击的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太新了，想知道在单击.slidebtn a时如何额外输出屏幕$ index，这样我就可以实际检查索引是否相等（无论如何，它们应该相等）因为容器中每种元素类型只有3种。

Answer 1

只需添加一个禁用绑定，它将为您的元素提供没有任何神奇技巧的类 -

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

Answer 2

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

替换

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

与

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

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

new

与

var self = this;

并以

结束

var self = {};

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

基于匹配指标添加禁用类

2 个答案: