我modules
对 Meteor 1.3 中的 ES2015 感到非常兴奋。我们使用 Meteor 1.2 编写了一个中等复杂度的应用程序。由于我们有大量的模板和文件,在客户端下载内容需要一些时间。所以我对使用import
. 从流星之夜谈话中,他们说 Blaze 模板仍然是全局的,无法导入(或延迟加载),我尝试使用React
insideBlaze
。
- 添加
react-template-helper
包使用meteor add react-template-helper
创建
imports
文件夹并添加testComponent.jsx
导出“TestComponent”的文件//testComponent.jsx import React from 'react'; export default class TestComponent extends React.Component { render() { return ( <div> <h1>TestComponent</h1> <div>This is from Test Component</div> </div> ); } }
在 Blaze 模板外部
imports
文件夹中之后,<!-- homeReact template html--> <template name="homeReact"> <div> {{> React component=TestComponent}} </div> </template>
在模板的 js 文件中,该文件也在导入文件夹之外
// homeReact template js import { Template } from 'meteor/templating'; import TestComponent from '/imports/testComponent.jsx`; Template.homeReact.helpers({ TestComponent() { return TestComponent; } });
这有效,但在imports/testComponent.jsx
客户端下载(使用 chrome 开发工具 - 源选项卡检查),即使当前路线不需要homeReact
模板。
然后我用require
而不是import
这样,
// homeReact template js
import { Template } from 'meteor/templating';
Template.homeReact.onCreated(function () {
this.TestComponent = require('/imports/testComponent.jsx').TestComponent;
});
Template.homeReact.helpers({
TestComponent() {
return Template.instance().TestComponent;
}
});
这段代码也下载了imports/testComponent.jsx
文件,但另外我也得到了一个错误
在模板“homeReact”中,调用
{{> React ... }}
缺少的component
参数。
所以,我的问题是,是否可以仅在需要时延迟加载(下载)文件?