【问题标题】:Meteor 1.5 : Dynamic Import for BlazeMeteor 1.5:Blaze 的动态导入
【发布时间】:2017-11-29 06:12:51
【问题描述】:

我有两个问题:

1) 我想为 Blaze 使用 Meteor 1.5 动态导入,但所有示例和教程都是针对 React 给出的。所以我很困惑它究竟是如何使用的。谁能举个例子。

2) 我正在使用来自大气js.com 的软件包,例如 amcharts,我只需要在管理仪表板端。如何动态导入?

提前致谢!

更新(解决方案):

下面是homepage.html(父模板)

<template name="homepage">
  Homepage Content
 {{> Template.dynamic template=content}}    
</template>

login.html(子模板)

<template name="login">
  You're logged in!
</template>

login.js

import '../homepage/homepage.js';
import './login.html';
API = function () {
  BlazeLayout.render("homepage",{content: 'login'});
}

export { API }

main.js

LoadLogin = function () {
  import('/imports/modules/common/login/login.js').then(function (api) {
    api.API();
  })
}

/lib/route.js

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
FlowRouter.route('/', {
  name: 'homepage',
  action() {
    LoadLogin();
  }
});

【问题讨论】:

    标签: meteor meteor-blaze meteor-packages dynamic-import


    【解决方案1】:

    使用示例链接https://github.com/thesaucecode/meteor-amcharts-example/blob/master/client/example2.js 非常简单,您只需在Template.MYTEMPLATE.onRendered(function(){}); 中编写代码

    除此之外,您还可以使用 var chart 作为响应变量。

    【讨论】:

    • 我在显示 Amcharts 时没有问题。我想在加载主页后动态导入 amchart,即我不希望 Amchart 成为我最初的流星包的一部分。最初只想加载主页,然后加载其他模块。
    【解决方案2】:

    在 Meteor 1.5 中使用 Blaze 动态导入模块的基本技术如下:

    Template.theTemplate.events({
      'click button'(event, instance) {
        import("foo").then(Foo => {
          console.log(Foo);
        });
      }
    });
    

    请务必仔细查看您的模块是如何导入的,因为在代码中调用它时可能需要进行一些重构。例如,使用“zxcvbn”:

    曾经

    const result = zxcvbn(pwd);
    

    const result = zxcvbn.default(pwd);
    

    【讨论】:

      【解决方案3】:

      我正在开发我自己的管理面板Meteor Candy,由动态导入驱动,所以我很高兴分享我是如何工作的。

      首先,我们有 view.html:

      <template name="admin">
          Admin
      </template>
      

      其次,我们有我们的 JS 逻辑:

      import { Template } from 'meteor/templating';
      import { Meteor } from 'meteor/meteor';
      import { Blaze } from 'meteor/blaze';
      
      import './view.html';
      
      API = {}
      
      API.render = function () {
           Blaze.render(Template.admin, document.body);
      }
      
      export { API }
      

      最后,我们只需要导入该代码并触发我们的模板渲染到页面中:

      openAdmin = function () {
          import('./imports/admins').then(function (api) {
              api.render()
          })
      }
      

      一旦运行openAdmin() 函数,模板将从服务器导入并调用渲染函数。

      【讨论】:

      • 非常感谢您的回复。你能分享你的文件结构吗?实际上我在控制台上收到错误=>未捕获(承诺)错误:找不到模块'./imports/admins'
      • 我在这个 repo 中有一个类似的例子,你可以看到一个典型的文件结构:github.com/msavin/dynamic-import-example
      • 非常感谢。我正在关注您的代码,到目前为止它运行良好。
      猜你喜欢
      • 1970-01-01
      • 2018-06-27
      • 2019-02-02
      • 1970-01-01
      • 2015-10-16
      • 1970-01-01
      • 2015-05-09
      • 2017-07-09
      • 2014-05-27
      相关资源
      最近更新 更多