Question

我正在尝试使用knockout来隐藏文本，如果大于某个值。出于某种原因，我无法让它发挥作用。当我单击测试按钮时，第二个文本字段应显示..

<body class="calc" onLoad="createnav()">
<input type="button" value="test" />

<p data-bind="text: 'This shows', if: 6 > 4" ></p>
<br>    
<p data-bind="text: 'This does Not', if: 6 > qty"></p>

这是脚本：

function AppViewModel() {
  this.qty = ko.observable("1"); } 
  // Activates knockout.js 
  var app = new AppViewModel(); ko.applyBindings(app);

//When I click button I want the name to change
$('input[type=button]').click( function() {
  var sum = '5';
  app.qty(sum);
});

http://jsfiddle.net/d577K/44/

Answer 1

正如其他人所指出的那样，您要比较可观察对象qty而不是其值qty()

但您也可以考虑将文本设为计算

Fiddle Example

<p data-bind="text: output"></p>

function AppViewModel() {
    var self = this;
    this.qty = ko.observable("1");
    this.output = ko.computed(function(){
        return (6 > self.qty()) ? "This shows too" : "";
    });
}

这是一种更像淘汰赛的做事方式，并且提供了将逻辑保留在视图模型中而不是将其混合到标记中的优势。

除此之外，你可以在调试时清楚地看到你的javascript值，并注意到qty是一个函数而不是一个数字。

如果您想在多个地方展示它，它还允许您重复使用此值而不重复计算。

Answer 2

您需要访问qty observable的值：

<p data-bind="text: 'This does Not', if: 6 > qty()"></p>

Answer 3

简单，

<p data-bind="text: 'This does Not', if: 6 > qty()"></p>

在表达式

中使用observable属性时，不能使用声明性绑定（没有parenthis）

当值发生变化时，Knockout不会显示

3 个答案: