javascript - 获取组件的异步 View 模型

Question

我想从服务器获取 View 模型并在我的组件中使用它。是否可以？我的尝试，显然行不通:

function getDummyViewModelAsync(){
   setTimeout(function(){
       cb({ foo: 1 });
   }, 500);
}

ko.components.register('my-component', {
   viewModel: {
       createViewModel: function(params, componentInfo) {

           getDummyViewModelAsync(function(viewModel){
               return viewModel;
           });
       }
   },
   template: ...
});

Answer 1

从我们在评论中的交流中不清楚您想要做什么而动态加载模块无法完成。您可以动态加载模块结构，当然也可以动态填充其中的元素。

如果您想手动完成所有操作，也可以这样做。将您的 View 模型传递给获取函数。让获取函数返回一个 promise ，并在获取数据并将其放入 View 模型时解析它。您的模板甚至可以动态引用其他模板，因此您在加载时看到一件事，在完成后看到另一件事。

function getDummyViewModelAsync(populateMe) {
  return new Promise(
    function(resolve, reject) {
      setTimeout(function() {
        populateMe.cb = ko.observable('A value');
        resolve('whatever');
      }, 500);
    }
  );
}

ko.components.register('my-component', {
  viewModel: {
    createViewModel: function(params, componentInfo) {
      var vm = {
          template: ko.observable('loading'),
          ready: ready
        },
        ready = getDummyViewModelAsync(vm);
      ready.then(function() {
        vm.template('ready');
      });
      return vm;
    }
  },
  template: document.getElementById('selector').innerHTML
});

console.clear();
ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id='loading'>
  Loading...
</template>
<template id='ready'>
  Ta da!
  <div data-bind="text: cb"></div>
</template>
<template id='selector'>
  <!-- ko template: template -->
  <!-- /ko -->
</template>

<my-component></my-component>