1

我正在开发一个基诺游戏。当用户按下开始按钮时，Meteor.Call() 会执行该卡片选择的所有操作。包括更新用户余额。我为中奖号码设置了一个 setTimeout，以便它们在大约 20 秒的时间内显示。问题是当拨打电话时，余额会立即更新，然后数字会延迟显示。我不熟悉如何解决这个问题。我很感激任何帮助。

服务器端：

Meteor.methods({
    process: function(){
        // generate numbers
        // update user balance
    }
});

客户端：

Template.keno.events({
    'click #start' : function(){
        Meteor.call('process',function(err,numbers){
            //setTimeout on displaying numbers
            // as setTimeout displays numbers, balance already updated. I need to delay
            // the balance update, until all numbers are displayed. 
            // otherwise, the player see that they won before all numbers come out.
        });
    }
});

** 更新 **

我需要的唯一帮助是了解如何使像 {{balance}} 这样的变量无反应，直到我完成 setTimeout，然后让它更新。我应该使用会话吗？我是否应该不使用模板变量，而是使用 jquery 插入余额？这只是一个简单的解决方案，困难在于我不知道我正在寻找什么功能/方法可以帮助我在设定的时间内关闭反应性，然后在 Meteor.call() 之后更新然后数字完成它的setTimeout。

4

6 回答 6

2

如果我正确理解您的情况，您需要在您决定时设置模板 {{balance}} 表达式，而不是在集合从服务器获得结果时设置。因此，您可以根据需要使用 Session 设置值。下面是一个例子：

<body>
  {{> game}}
</body>

<template name="game">
  <button id="process">Process</button>
  <div>{{firstNumber}}</div>
  <div>{{secondNumber}}</div>
  <div>balance: {{balance}}</div>
</template>

if (Meteor.isClient) {
  Template.game.events({
    'click #process': function (e, tmpl) {
      Meteor.call('process', function (err, result) {
        Session.set('firstNumber', result[0]);
        setTimeout(function () {
          Session.set('secondNumber', result[1]);
          Session.set('balance', result[0] + result[1]);
        }, 2000);
      });
    }
  });

  Template.game.helpers({
    firstNumber: function () { return Session.get('firstNumber'); },
    secondNumber: function () { return Session.get('secondNumber'); },
    balance: function () { return Session.get('balance'); }
  });
}

if (Meteor.isServer) {
  function randomNumber () {
    return Math.floor(Math.random() * 100);
  }
  Meteor.methods({
    process: function () {
      return [randomNumber(), randomNumber()];
    }
  });
}
于 2013-06-16T01:03:23.367 回答
0

好的，所以我在 5 分钟内把这个演示放在一起，但工作正常。

这是演示： http: //keno-test.meteor.com/

当然，它需要更多的工作，但延迟的事情是有效的。

HTML:
<head>
    <title>keno-test</title>
</head>

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

<template name="hello">

    <input id="callCardThing" type="button" value="Start card-thing" />

    <h1>Here are the cards!</h1>
    <ul>
    {{#each cards}}

        <li>{{value}}</li>

    {{/each}}
    </ul>

</template>


JS:
Cards = new Meteor.Collection('cards');

if (Meteor.isClient) {

    Deps.autorun(function () {
        Meteor.subscribe("cards");
    });

    Template.hello.events({
        "click #callCardThing": function (event) {
            Meteor.call("doCardThingOnServer");
        }
    });

    Template.hello.helpers({
        cards: function () {
            return Cards.find({});
        }
    });
}

if (Meteor.isServer) {

    Meteor.startup(function () {
        Meteor.publish("cards", function () {
            return Cards.find({});
        });
    });

    Meteor.methods({
        doCardThingOnServer: function () {
            // I remove all the cards every time just for the demo…
            Cards.remove({});
            var numberOfcards = 10;
            var counter = Meteor.setInterval(function () {
                Cards.insert({value: 'whatever! no: '+numberOfcards });
                numberOfcards--;
                if (numberOfcards < 1) Meteor.clearInterval(counter);
            }, 1500);
        }
    });
}
于 2013-06-15T16:50:05.400 回答
0

看看大气动画包：https ://atmosphere.meteor.com/package/animation ！

我刚刚完成了这个包来探索一种在数据库反应性上做动画的方法。您必须注册一个光标和模板才能制作动画。有一个项目将向您展示如何做到这一点。

我希望它会帮助你。

于 2013-06-24T14:20:37.443 回答
0

好的，那么条件 {{balance}} 渲染怎么样？

var shouldRender = false;

setTimeout(function () {
  shouldRender = true;
}, 2000);

Template.template_name.shouldRender = function () {
  return shouldRender;
}

{{#if shouldRender}}
  {{>balance}}
{{/if}}
于 2013-06-15T17:06:20.233 回答
0

也许解决方案是对重复的集合使用反应性：您仅在服务器端设置主集合。您在客户端创建另一个集合，该集合将是一个重复集合，但仅用于显示然后您将主集合发布到客户端。在客户端，您在其上设置所有必需的观察者，这将复制对复制集合的所有修改。但是通过这种方式，您可以管理动画或任何其他想要的功能。客户端的所有操作都会在服务器端调用，但不会立即影响模板，因为模板只使用重复的集合。我希望它会帮助你。

于 2013-06-15T14:20:09.083 回答
0

尝试将您的Meteor.call()内部包裹setTimeout()起来，例如：

Template.keno.events({
    'click #start' : function(){
         setTimeout(function(){
               Meteor.call('process',function(){
                 //do something.
               });
         }, 20000);
     }
});
于 2013-06-15T04:19:15.093 回答