Javascript 如果knockoutjs中的绑定不起作用_Javascript_Html_Knockout.js_Data Binding

Javascript 如果knockoutjs中的绑定不起作用

javascript html knockout.js data-binding

Javascript 如果knockoutjs中的绑定不起作用,javascript,html,knockout.js,data-binding,Javascript,Html,Knockout.js,Data Binding,我试图在knockoutjs中使用if语句进行数据绑定：例如，此if应为false，且div中的文本应隐藏：  <div data-bind="if: little">rank : little</div> 我已经粘贴了app.js和index.html的代码这是app.js var ViewModel = function (){ th

我试图在knockoutjs中使用if语句进行数据绑定：

例如，此if应为false，且div中的文本应隐藏：

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

我已经粘贴了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>


猫点击器
排名：小

您好，您可以使用敲除的可见绑定

以下代码适用于您：

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

rank:little
或
排名：小

作为一个函数，

little

总是正确的。改为测试

little（）

。就像@RoyJ所说的，little是一个函数，因为它存在，所以它的计算结果为true。在淘汰中调试的一个好方法是将

if

s替换为

text

s。在这里查看您的代码，并写出

little

和

little（）。可能你认为你的小是一个计算的可观察对象，这就是为什么你没有把那些（）。
    <div data-bind="visible: !little()">rank : little</div>
                            OR
    <div data-bind="visible: little()">rank : little</div>