Javascript 为什么我的数据绑定到计算函数不起作用(使用knockout.js和jade)?

Javascript 为什么我的数据绑定到计算函数不起作用(使用knockout.js和jade)?,javascript,knockout.js,pug,Javascript,Knockout.js,Pug,我在codepen.io中使用knockout.js,使用jade作为预处理器 我的编辑按钮应该将第一个td中的值更改为true,保存更改应该将第一个td的值更改回false。为什么装订不起作用?它第一次绑定到它,但显然没有不断地倾听变化。为什么不是呢?我在单击时调用的函数是一个计算函数,我试图更改的变量是一个可观察的变量。为什么它不起作用 这是我的代码的链接,在代码笔上 代码也在这里 翡翠 .container .users.col-md-11.col-xs-12.table-respo

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

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

这是我的代码的链接,在代码笔上

代码也在这里

翡翠

.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())
仅供参考,如果您不熟悉jade,只需单击jade代码上方的“查看编译”按钮即可


谢谢

计算的可观测值
依赖于一个或多个其他可观测值,并且在这些依赖项发生任何变化时,
将自动更新。
如果将计算函数更改为普通函数,则每当单击事件发生时,都会调用这些函数。
除此之外,请确保以可以将
Edit
按钮绑定到其行输入的方式构造模型

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

计算的可观测值
依赖于一个或多个其他可观测值,并且在这些依赖项发生任何变化时,
将自动更新。
如果将计算函数更改为普通函数,则每当单击事件发生时,都会调用这些函数。
除此之外,请确保以可以将
Edit
按钮绑定到其行输入的方式构造模型

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

谢谢我知道编辑按钮和它的行输入,但我只是尝试了一些不同的东西,还没有改变。这很有道理,回答得很好!简单点给你!谢谢我知道编辑按钮和它的行输入,但我只是尝试了一些不同的东西,还没有改变。这很有道理,回答得很好!简单点给你!