为什么我的数据绑定到计算函数不起作用（使用 knockout.js 和 jade）？

Question

我在 codepen.io 中使用 knockout.js，jade 作为我的预处理器。

我的编辑按钮应该将第一个 td 中的值更改为 true，而保存更改应该将第一个 td 的值改回 false。为什么绑定不起作用？它第一次绑定到它，但显然并没有不断地倾听变化。为什么不是呢？我在点击时调用的函数是一个计算函数，我试图更改的变量是一个可观察变量。为什么它不起作用？？

这是我的代码 link，在 codepen

http://codepen.io/jkwest30/pen/bpYXYP

这里也是代码

翡翠

.container
  .users.col-md-11.col-xs-12.table-responsive 
table.col-xs-12
  tr
    th Name
    th Username
    th

  tr
    td 
      input.form-control(data-bind="value:edit()" )
    td 
      input.form-control(value="jkwest30@gmail.com" )
    td
      button.btn.btn-info.col-xs-12(data-bind="click:editFunction()") Edit
  tr
    td 
      input.form-control(value="Jake" )
    td 
      input.form-control(value="jkwest30@gmail.com" )
    td
      button.btn.btn-info.col-xs-12(data-bind="click:editFunction()") Edit

button.save.btn.btn-success.col-xs-12.col-md-4.col-md-offset-4(data-bind="click:saveChanges()") Save All Changes

Javascript

var viewModel = (function(){
    function viewModel(){
        var self = this;
        this.name = ko.observable("knockout works!");
        this.edit = ko.observable(false);
        this.editFunction = ko.computed(function(){
            self.edit(true);
        }) 
        this.saveChanges = ko.computed(function(){
            self.edit(false);
        })
    }
    return viewModel;
})()

ko.applyBindings(new viewModel())

仅供参考，如果您不熟悉翡翠，只需单击翡翠代码上方的 "view compiled" 按钮即可。

谢谢！

Answer 1

computed observables 依赖于一个或多个其他可观察对象，并且将 automatically (not by click event) 在这些依赖项中的任何一个发生变化时更新。如果您将计算函数更改为普通函数，则只要发生点击事件就会调用它们。
除此之外，请确保以一种可以将 Edit 按钮绑定到其行的方式构建模型输入

 this.editFunction = function(){
   console.log("editFunction");
   self.edit(true);
 } 
 this.saveChanges = function(){
    console.log("saveChanges");
    self.edit(false);
 }

为什么我的数据绑定到计算函数不起作用（使用 knockout.js 和 jade）？

Why is my data binding to a computed function not working (using knockout.js and jade)?

javascript

knockout.js

pug