knockout.js 敲除计算可观测值阅读存储值后未更新

du7egjpx  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(132)

我使用Knockout计算可观测值以下列方式存储来自用户的数据:

var DummyClass = (function() {
   userPrefs = ko.observable({
      value1: 0,
      value2: 0,
      value3: 0});

   commonPrefs = ko.observable({
      required: false
   });

   var userSettings = ko.computed(function() {
      var value1 = userPrefs().value1;
      var value2 = userPrefs().value2;
      var value3 = userPrefs().value3;

      if (typeof value1 === 'undefined') {
         value1 = 0;
      }

      value1 = String(value1);

      if (value1.length === 0) {
         if (commonPrefs().required === true) {
            value2 = 0;
            value3 = 1;
         }
         else {
            value2 = 1;
            value3 = 0;
         }
      }

      return {
         value1: value1,
         value2: value2,
         value3: value3
      };
   }
}

如果我在代码中的其他地方使用dummyClass.userSettings().value1检索value 1,或者使用新值更新它,则任何进一步尝试通过dummyClass.userSettings({value 1:1,值2:2,值3:3})(例如)将不再起作用,并且除非重新加载Web应用程序,否则我在userSettings中拥有的任何值都将保持这种状态。

gab6jxml

gab6jxml1#

您正在尝试为计算字段“userSettings”设置一个值,但您只定义了“read”函数(没有参数)。为了通过此属性设置某些值,您应该定义一个“write”函数。请参阅computed writable docs
除此之外,请注意,如果您有一个带有支持对象的可观察字段(例如,DummyClass.userPrefs),您应该为“observable”函数提供一个新对象,以便更新该字段。
例如:
DummyClass.userPrefs().value1 = 1-不会触发虚拟类的更新。userPrefs
DummyClass.userPrefs({value1: 1, value2: 2, value3: 3})-将触发更新

yqlxgs2m

yqlxgs2m2#

有几点:

  • 你的userPrefs是可观察的,但它的属性不是。所以KO不知道它们是否被改变了。使用KO时要记住的一件事是你必须使所有的东西都是显式可观察的。尽管在这种情况下,如果你总是更新整个对象,你会侥幸逃脱。
  • 默认情况下,计算变量是 not writable。如果您需要,您必须显式地使其可写,但这不是您通常会做的事情(至少在我使用KO的这些年中,我只遇到过一个有效的用例,用于使计算变量可写;当然,这可能是个人喜好的问题!)。
  • typeof value1 = 'undefined'是一个赋值运算,而不是比较运算,所以这是行不通的。

下面是一些示例代码,它们可以完成您正在寻找的任务(我认为):

function ViewModel() {
    var vm = this;

    vm.userPrefs = ko.observable({
        value1: 0,
        value2: 0,
        value3: 0
    });

    vm.commonPrefs = {
        required: false
    };

    vm.userSettings = ko.pureComputed({
        read () {
            var value1 = vm.userPrefs().value1 || 0;
            var value2 = vm.userPrefs().value2;
            var value3 = vm.userPrefs().value3;

            if (value1 === 0) {
                if (vm.commonPrefs.required === true) {
                    value2 = 0;
                    value3 = 1;
                } else {
                    value2 = 1;
                    value3 = 0;
                }
            }

            return {
                value1,
                value2,
                value3
            };
        },
        write(newVal) {
            vm.userPrefs(newVal);
        }
    });
}

小提琴:https://jsfiddle.net/thebluenile/fqznpexg/
但是,可写的computed并不是真正必要的,因为您可以直接操作userPrefsvm.userPrefs({ value1: 1, value2: 2, value3: 3}) .

相关问题