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

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

本文关键字：jade 不起作用 使用 knockout js 函数 一个 数据绑定 我的 为什么 计算      更新时间：2024-02-13

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

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

这是我的代码链接，它在代码笔上

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())

仅供参考，如果你不熟悉翡翠，只需点击翡翠代码上方的"查看编译"按钮。

谢谢！

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

 this.editFunction = function(){
   console.log("editFunction");
   self.edit(true);
 } 
 this.saveChanges = function(){
    console.log("saveChanges");
    self.edit(false);
 }
相关文章：