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创建帐户期间创建加载功能

1 个答案: