获取组件

Question

我想从服务器获取视图模型并在我的组件中使用它。可能吗？我的尝试，显然不起作用：

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

我们在评论中不清楚您要尝试做什么，而动态加载模块无法做到这一点。您可以动态加载模块结构，当然也可以动态填充它的元素。

如果你想手工做所有事情，你可以做到。将viewmodel传递给提取功能。让提取函数返回一个promise，并在获取数据并将其放入viewmodel时解析它。您的模板甚至可以动态引用其他模板，因此您在加载时会看到一件事，完成后会看到另一件事。

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;