【问题标题】:When is Knockout's ObservableArray subscribe called什么时候调用 Knockout 的 ObservableArray 订阅
【发布时间】:2019-02-17 00:12:55
【问题描述】:

任何淘汰 obervable 的 subscribe() 仅应在值发生变化时调用。但是在下面的代码 sn-p 中,即使将相同的值分配给 observable 两次,订阅也会被调用。我可以理解,一旦订阅将被调用(即当第一次为 x 分配 y 值时)但我不明白的是为什么在分配的值没有变化的情况下第二次调用它?有人可以帮我了解订阅的工作原理吗?

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    var x = ko.observableArray([]);
    var y = [1]; 
    var oldVal = '';   
    x.subscribe(function(newVal){
   
      alert("newVal: "+newVal+" oldVal: "+oldVal);
       console.log("newVal: "+newVal+" oldVal: "+oldVal);
      var type = newVal instanceof Array;
      alert(type);
      oldVal = newVal;
    });    
    x(y);        
    x(y);
   
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

【问题讨论】:

  • reference 改变时被调用。将相同的值分配给变量两次仍然是引用的更改。在控制台试试这个:const a = "1"; a="1";

标签: javascript knockout.js knockout-2.0 knockout-3.0


【解决方案1】:

任何淘汰 obervable 的 subscribe() 只应在值发生变化时调用。

根据淘汰赛维护者的说法,这并不完全正确。

Knockout 使用equalityComparer 来确定新值是否与旧值不同:

console.log(
  ko.observable.fn.equalityComparer
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>

如您所见,如果值是原始值,它实际上只会执行===。任何其他值,例如对象、数组和函数,只会总是触发更改。

我通常通过覆盖默认值来“修复”这个问题:

const someObj = {};
const someObs = ko.observable(someObj);

someObs.subscribe(console.log);

// Logs {}
console.log("with regular eq comparer");
someObs(someObj);

// Change equalityComparer for *every* observable:
ko.observable.fn.equalityComparer = (a, b) => a === b;

// No longer logs:
console.log("with custom eq comparer");
someObs(someObj);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

如果您不想覆盖所有的equalComparers,您也可以只在一个可观察实例上更改它。

默认行为的原因是,许多人希望这会触发更新:(当您使用我的自定义比较器时它不会触发更新)

const someObj = { a: 1 };
const someObs = ko.observable(someObj);

someObj.a = 2;
someObs(someObj)

【讨论】:

    猜你喜欢
    • 2018-05-08
    • 2021-10-10
    • 2021-12-13
    • 2014-07-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多