Meteor 1.3 - 延迟加载或评估文件

时间:2016-03-30 02:29:56

标签: meteor meteor-react

我对Meteor 1.3中的ES2015 modules感到非常兴奋。我们用Meteor 1.2编写了一个中等复杂度的应用程序。由于我们有大量的模板和文件,因此在客户端下载内容需要花费一些时间。所以我对使用import的延迟加载功能感兴趣。从meteor night talk开始,他们说Blaze模板仍然是全局的,无法导入(或延迟加载),我尝试过using React inside Blaze

  • 使用react-template-helper
  • 添加了meteor add react-template-helper个包
  • 创建imports文件夹并添加导出'TestComponent'的testComponent.jsx文件

    //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>
        );
      }
    }
    
  • imports文件夹外的Blaze模板中

    <!-- 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模板,但是homeReact已下载到客户端上(使用chrome dev工具 - 来源选项卡进行检查)。

然后我使用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参数。

所以,我的问题是,是否可以在需要时延迟加载(下载)文件?

0 个答案:

没有答案