如果在 knockoutjs 中的绑定不起作用答案

【问题标题】：if binding in knockoutjs not working如果在 knockoutjs 中的绑定不起作用
【发布时间】：2016-02-22 00:40:22
【问题描述】：

我正在尝试在带有数据绑定的 knockoutjs 中使用 if 语句：

例如这个 if 应该是 false 并且应该隐藏 div 中的文本：

    <!-- this is what i am trying to get working. -->
    <div data-bind="if: little">rank : little</div>

我的猜测是这件作品没有按预期工作。它应该在开始时返回 false，clickCount 为 0。

  this.little = function(){
    return this.clickCount() > 5;
  };

我已经粘贴了app.js和index.html的代码。

这是 app.js

var ViewModel = function (){
  this.clickCount = ko.observable(0);
  this.name = ko.observable('Tabby');
  this.imgSrc = ko.observable('img/2.jpg');
  this.imgAttribution = ko.observable('http://www.flickr.com/photos/big');


  this.incrementCounter = function() {
    this.clickCount(this.clickCount() + 1);
  };


  // this is not returning false as it should.
  this.little = function(){
    return this.clickCount() > 5;
  };

}

ko.applyBindings(new ViewModel());

这是 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cat Clicker</title>
</head>
<body>

    <div>

        <h2 data-bind="text: name"></h2>
        <div data-bind="text: clickCount"></div>

        <!-- this is what i am trying to get working. -->
        <div data-bind="if: little">rank : little</div>

        <img src="" alt="cute cat" data-bind="click: incrementCounter, attr:{src: imgSrc}">

    </div>
    <script src="js/lib/knockout-3.2.0.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

【问题讨论】：

作为一个函数，little 始终为真。改为测试little()。
就像@RoyJ 所说，little 是一个函数，仅仅因为它存在，它的评估结果为真。在 Knockout 中进行调试的一个好方法是将您的 ifs 替换为 texts。在此处查看您的代码，并写出 little 和 little()。 codepen.io/mblarsen/pen/QyXObm
你可能认为你的 little 是一个计算出来的 observable，这就是你没有放那些 () 的原因。

标签： javascript html knockout.js data-binding

【解决方案1】：

您好，您可以使用可见的淘汰赛绑定

以下代码将为您工作：

    <div data-bind="visible: !little()">rank : little</div>
                            OR
    <div data-bind="visible: little()">rank : little</div>

【讨论】：