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

原文 标签 javascript knockout.js

我想从服务器获取 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: ...
});

最佳答案

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

如果您想手动完成所有操作,则可以这样做。将您的 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>

关于javascript - 获取组件的异步 View 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35025403/

相关文章:

javascript - Angular Filter OrderBy 按字符串排序,但不按字母顺序排序

javascript - 编写我的第一个jQuery插件

javascript - webpack 要求 material-ui 的正确方法

javascript - IE 10 + KnockoutJS = HierarchyRequestError?

javascript - 对 observableArray 中的 observable 计算 knockout

knockout.js - knockout : order matters in computed observable?

javascript - 用Javascript剪切图像

javascript - 如何在JSON数组中发布数据

javascript - 为什么这里需要 $root ?

javascript - KnockOut.JS 选项文本