如何在使用 Meteor 创建帐户期间创建加载功能

Question

我有一个 Meteor 项目，由于连接速度慢等原因，新用户在注册过程中通常会有延迟。有没有办法在此过程中创建加载屏幕？

我目前有 sacha:spin 包，当不同的页面正在检索要生成的数据时，我将它与 iron:router 包一起使用。例如。对于我的主页，我在我的路由中使用此代码显示所有用户（主要用于调试目的）：

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading'
});

Router.route('/', {
  name: 'home',
  controller: 'HomeController'
});

HomeController = RouteController.extend({
  template: 'home',
  waitOn: function() {
    return Meteor.subscribe('users');
  }
});

这是我的微调器模板（漂亮又简单）：

<template name="loading">
  {{> spinner}}
</template>

这个设置工作得很好，所以我想知道在我这里的创建帐户过程中是否容易实施：

Template.signup.events({
  'submit #signup-form': function(event, template) {
    event.preventDefault();

    var validated = true,
        username = ...,
        email = ...,
        firstName = ...,
        lastName = ...,
        password = ...,

    // Validation

    if (validated) {
      Accounts.createUser({
        username: username,
        email: email,
        password: password,
        profile: {
          firstName: firstName,
          lastName: lastName
        }
      },
      function(err) {
        if (err) {
          // Handle it
        } else {
          Router.go('home');
        }
      });
    return false;
  }
});

我可以在创建帐户过程中使用我用于主页模板的加载程序吗？

Answer 1

我会用 reactive-var 来处理这个问题。 https://atmospherejs.com/meteor/reactive-var

然后，在您的模板代码中：

Template.signup.onCreated( function() {
    Template.instance().isLoading = new ReactiveVar(false);
});

Template.signup.helpers({
    isLoading() {
        return Template.instance().isLoading.get();
    }
});

Template.signup.events({
  'submit #signup-form': function(event, template) {
    event.preventDefault();

    var validated = true,
        username = ...,
        email = ...,
        firstName = ...,
        lastName = ...,
        password = ...,

    // Validation

    if (validated) {
      template.isLoading.set(true);
      Accounts.createUser({
        username: username,
        email: email,
        password: password,
        profile: {
          firstName: firstName,
          lastName: lastName
        }
      },
      function(err) {
        if (err) {
          // Handle it
        } else {
          Router.go('home');
        }
        template.isLoading.set(false);
      });
    return false;
  }
});

在当前的注册模板中，您需要具有以下结构：

{{#unless isLoading}}
  <!-- YOUR CONTENT GOES HERE -->
{{else}}
  {{> loading}}
{{/unless}}

如何在使用 Meteor 创建帐户期间创建加载功能

How to created a load feature during account creation with Meteor

loading

meteor