Question

我正在考虑使用这个spinner所以当有什么东西被提交到后端时，我可以在后端正在做它的事情时向客户端显示微调器。

我只是想知道我是否对此有了正确的认识。

我从客户端到后端调用函数“myfunction”：

var result = Meteor.call('myfunction', {});
//start spinner
createNewSpinner (selector, spinnerOpts);
createLoadingOverlay (target, overlayColor)

if(result == true) {
  //stop spinner
  destroyLoadingOverlay (selector);
}


// backend function
Meteor.methods({
  myfunction: function(data) {
  // logic here
  return true;
  }
});

我真的不确定我的伪代码，文档中没有任何关于如何使用微调器的例子。看起来它可能与spin.js的调用方式不同，因此任何指针/代码示例都会受到赞赏。

Answer 1

这是一个完整的工作示例：

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Spinner Demo</h1>
  <button>Start</button>
  <div id='overlay'></div>
</template>

if (Meteor.isClient) {
  Template.hello.events({
    'click button': function() {
      // options for the spinner and target selector
      var color = 'rgba(255,255,255,0.6)';
      var options = {lines: 10, length: 20, speed: 1};
      var selector = '#overlay';

      // add the overlay
      LoadingOverlay.createLoadingOverlay(selector, color);
      // remove the default spinner
      $('.spinner').remove();
      // add our custom spinner
      LoadingOverlay.createNewSpinner('loading', options);

      Meteor.call('myfunction', {}, function(err, result) {
        if (!err) {
          // remove the overlay on success
          LoadingOverlay.destroyLoadingOverlay(selector);
        }
      });
    }
  });
}

if (Meteor.isServer) {  
  Meteor.methods({
    myfunction: function(data) {
      // simulate a delay
      Meteor._sleepForMs(2000);
      return true;
    }
  });
}

关键是删除回调中的覆盖（异步方法完成后）。

Meteor 0.9.1.1：如何使用微调器

1 个答案: