javascript - 每当我们确定对象已创建时如何获取对象的属性

Question

我有一个名为 MainVM 的变量，只要相应的 .js 文件加载到基本布局 View 中，然后加载到不同的布局 View 中，它就会被设置为 knockout View 模型的一个新实例查看我需要设置 MainVM 的其中一个属性。

var MainVM;
core.load(["Scripts/Shared/MainViewModel.js"],
  function () {
    MainVM = new MainViewModel();
});

问题:我需要确保 MainVM 设置了 MainViewModel 的新实例，然后为其设置了一个属性。我所做的是将它包装在 setTimeout 中，并在 200 毫秒后调用 MainVM，希望它已设置如下:

$(function() {
  setTimeout(function() {
    core.load(["Scripts/Account/AccountMainViewModel.js"],
      function () {
        MainVM.CurrentVM(new AccountMainViewModel());
        MainVM.CurrentVM().Load();
        });
  }, 200);
});

但如果由于某种原因 MainVM 的加载时间超过 200 毫秒，上述方法似乎并不准确。另外，我正在考虑使用 setInterval 来继续调用一个函数来检查 MainVM 是否每 10 毫秒定义一次。但我想知道是否有人知道更好的方法，如何处理这个问题，例如我们可以通过使用 promise 和 then 将其用作回调函数。但这里不是我可以利用的功能promise`。它已经在共享基础布局中调用过一次，不能将它放在一个函数中并在其他地方再次调用它。

Answer 1

当 core.load(["Scripts/Shared/MainViewModel.js"]) 调用完成时，您可以使用 $.Deferred() 执行任务MainVM 到回调函数中的 deferred.resolve()。在 .ready() 处理程序中使用 .then() 访问已解析的 promise 值:MainVM

var MainVM; var deferred = $.Deferred();
core.load(["Scripts/Shared/MainViewModel.js"],
  function () {
    MainVM = new MainViewModel();
    deferred.resolve(MainView);
});

$(function() {
    deferred.promise().then(function(mainview) {
      // `view` : `MainVM`
      core.load(["Scripts/Account/AccountMainViewModel.js"],
        function () {
          mainview.CurrentVM(new AccountMainViewModel());
          mainview.CurrentVM().Load();
      });
    })
    // handle error
    .fail(function(err) {
      console.log("error loading MainVM", err)
    })    
});

function MainViewModel() {
  this.id = 123;
  this.CurrentVM = function() {
    return this.id
  };
}

var MainVM;
var deferred = $.Deferred();
var core = {
  load: function(script, callback) {
    callback(script)
  }
}
core.load(["Scripts/Shared/MainViewModel.js"],
  function() {
    // asynchronous process
    setTimeout(function() {
      MainVM = new MainViewModel();
      // resolve `MainVM`
      deferred.resolve(MainVM);
    }, 1 + Math.floor(Math.random() * 3500))
  });

$(function() {
  deferred.promise().then(function(mainview) {
      // `view` : `MainVM`
      core
        .load(["Scripts/Account/AccountMainViewModel.js"], function() {
          console.log(mainview.CurrentVM(), MainVM)
        });
    })
    .fail(function(err) {
      console.log("error loading MainVM", err)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>