javascript - A 计算出 "sleeps"直到某些初始化完成

Question

我有一个复杂的 View 模型，它包含几个可观察的属性、数组等。我有一个计算的可观察的，它有几个依赖项。计算内部的逻辑不得在定义时执行，而只能在模型完全初始化后执行。

示例:

想象一个表单，用户可以在其中选择多个大洲、国家或城市之一。每次选择某些大陆时，国家/地区列表应仅包含位于所选大陆的国家/地区，城市等也应如此。

为了优化 HTTP 流量，初始列表将作为页面的一部分填充，因此不需要初始 JSON 请求。

var viewModel = function(data) {
  this.Continents = ko.observableArray(data.Continents);
  this.Countries = ko.observableArray(data.Countries);
  this.Cities = ko.observableArray(data.Cities);

  this.SelectedContinents = ko.observableArray(data.SelectedContinents);
  this.SelectedCountries = ko.observableArray(data.SelectedCountries);
  this.SelectedCities = ko.observableArray(data.SelectedCities);

  this.LoadFromServer = function() {
    $.post({
      url: '/reloadLists',
      data: { continents: this.SelectedContinents(), countries: this.SelectedCountries(), cities: this.SelectedCities() },
      success: function(result) {
        this.Continents(result.Continents);     
        this.Countries(result.Countries);
        this.Cities(result.Cities);
      } 
    });
  };

  ko.computed(function() {
    this.LoadFromServer();
  }, this);

}

...

var data = ... // initial data rendered on server-side 
var model = new viewModel(data);
ko.applyBindings(model);

使用这种方法时，问题在于，当计算模型最初执行 rad 函数时，LoadFromServer 逻辑也会在模型初始化时执行。这样就存在冗余的往返，因为初始列表已经在模型中。

我现在能想到的唯一解决方案是引入一个标志来阻止具体逻辑，直到需要为止。该标志不应该是可观察的，因为当我在构造函数末尾将其设置为 true 时，计算值将被重新计算，并且冗余的往返将再次进行。但是，如果该标志不是可观察的，那么我必须确保在初始化时捕获依赖项，以便它可以对之后的更改使用react。将所有这些放在一起，当前的结果看起来像这样。

var viewModel = function(data) {

  var initialized = false;

  this.Continents = ko.observableArray(data.Continents);
  this.Countries = ko.observableArray(data.Countries);
  this.Cities = ko.observableArray(data.Cities);

  this.SelectedContinents = ko.observableArray(data.SelectedContinents);
  this.SelectedCountries = ko.observableArray(data.SelectedCountries);
  this.SelectedCities = ko.observableArray(data.SelectedCities);

  this.LoadFromServer = function() {
    $.post({
      url: '/reloadLists',
      data: { continents: this.SelectedContinents(), countries: this.SelectedCountries(), cities: this.SelectedCities() },
      success: function(result) {
        this.Continents(result.Continents);     
        this.Countries(result.Countries);
        this.Cities(result.Cities);
      } 
    });
  };

  ko.computed(function() {
    var catchDependencies = [this.SelectedContinents(), this.SelectedCountries(), this.SelectedCities()];
    if (!initialized) return;
    this.LoadFromServer();
  }, this);  

  initialized = true;
}

这在技术上是一个很好的解决方案，但我不太喜欢它，因为它对我来说有一些气味。

针对这些场景有更好的解决方案吗？或者我只是不应该尝试优化事物并让初始 AJAX 加载而不是服务器端初始数据渲染？

Answer 1

对我来说，不返回值的计算是一种代码味道，因为它是一种具有单一目的的工具，您将其用作一种多重订阅。设置显式订阅会更清晰:

  this.SelectedContinents.subscribe(this.LoadFromServer);
  this.SelectedCountries.subscribe(this.LoadFromServer);
  this.SelectedCities.subscribe(this.LoadFromServer);

我不清楚LoadFromServer是否需要外部可见；您可以将其作为私有(private)函数来执行。