Knockout.js 如何使文本在淘汰中禁用或不可见

我在页面上有一条消息，指示用户选择至少五个项目。我希望一旦用户选择了五个项目，消息就会消失

<span class="message" data-bind="text: messageToChooseAtLeastFiveItems, disable: hasSelectedFiveItems"></span>

为什么跨距内的文本仍然出现

JSFiddle

---

你应该这样做

查看：

<select multiple="true" data-bind="options:array,selectedOptions:selected"></select>
<span class="message" data-bind="text: messageToChooseAtLeastFiveItems, visible: hasSelectedFiveItems"></span>
<button data-bind="click: chooseFive">Choose Five Now</button>
<button data-bind="click: chooseLessThanFive">Choose Less Than Five</button>

function ViewModel() {
    var self=this;
    self.array=ko.observableArray([1,2,3,4,5,6,7]);
    self.selected=ko.observableArray();
    self.messageToChooseAtLeastFiveItems = "Choose Five Foo";
    self.hasSelectedFiveItems = ko.observable(true);
    self.chooseFive = function () {
        self.hasSelectedFiveItems(false);
    }
    self.chooseLessThanFive = function () {
        self.hasSelectedFiveItems(true);
    }
    self.selected.subscribe(function(data){
        console.log(data.length);
        if(data.length >=5) { self.hasSelectedFiveItems(false);}
        else
        { self.hasSelectedFiveItems(true);}
    });

}

ko.applyBindings(new ViewModel());

带有下拉列表和按钮的工作样本

只需按小提琴上的按钮即可进行采样

---

使用computed（如毫米线修补）我们可以做这样的检查最适合这种特殊情况。

尝试使用visible这样的方法。干杯您可能只需要

self.hasSelectedFiveItems=ko.computed（函数（）{返回this.selected（）.length>=5；}，self）相反，它更干净一点。另外，在您的
chooseFive
演示功能中，您应该真正设置类似于
self.selected（[1,2,3,4,5,6]）
的东西，以证明它在工作，而不是通过设置最终可观察值来绕过逻辑。@Milimetric我同意，它可以是一个触摸清洁器。我更喜欢用户从列表中选择，所以我没有给出默认选择&没有绕过逻辑，我不确定我是否这样做。你能说得更详细一点吗？好的，这是我的建议，作为对你小提琴的更新：。我所说的绕过逻辑的意思是，
this.hasSelectedFiveItems
实际上应该只设置为对所选可观察对象长度的反应。因此，如果您使用按钮来显示您的反应是有效的，那么您应该执行触发操作，而不是结果更改。这有意义吗？如果您同意，欢迎使用我的代码更新您的答案。你做了工作，应该得到表扬，我只是个十足的怪胎：）我和@mmeric在一起。。。加上这个作为答案。这就是computed的用途。哦@Milimetric你误解了我，我只是保留了那个按钮，因为OP在帖子中使用了它们（即使我完全反对）。当然，我会在我的回答中更新你的提琴。
function ViewModel() {
    var self=this;
    self.array=ko.observableArray([1,2,3,4,5,6,7]);
    self.selected=ko.observableArray();
    self.messageToChooseAtLeastFiveItems = "Choose Five Foo";
    self.hasSelectedFiveItems = ko.observable(true);
    self.chooseFive = function () {
        self.hasSelectedFiveItems(false);
    }
    self.chooseLessThanFive = function () {
        self.hasSelectedFiveItems(true);
    }
    self.selected.subscribe(function(data){
        console.log(data.length);
        if(data.length >=5) { self.hasSelectedFiveItems(false);}
        else
        { self.hasSelectedFiveItems(true);}
    });

}

ko.applyBindings(new ViewModel());