javascript - meteor 0.9.1.1 : how to use a spinner

标签 javascript meteor

我正在考虑使用这个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 的调用方式不同,因此任何指针/代码示例将不胜感激。

最佳答案

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

<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;
    }
  });
}

关键是在回调中删除覆盖(在异步方法完成之后)。

关于javascript - meteor 0.9.1.1 : how to use a spinner,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25733792/

相关文章:

javascript - 检测 AJAX 请求何时开始

javascript - 如何在不同组件的 angular2 中设置 css 样式,以便它们能够很好地适应彼此?

authentication - Meteor自定义登录报错: access denied

mongodb - 如何替换 MongoDB 文档中数组的所有元素?

javascript - 如何在不重新加载模板的情况下更新集合?

javascript - 将值从 html 传递到 AngularJS Controller

javascript - meteor 中如何使用模板生成动态 HTML 标签属性?

javascript - 如何在javascript中正确转换html?

javascript - 如何在 Javascript 中比较两个变量?

javascript - 为什么我需要 JavaScript 原型(prototype)来扩展对象?