2

我不确定我是否了解如何让我的 Web 应用程序与 Meteor 保持反应。

我有这个非常简单的模板

<body>
{{> simple}}
</body>

<template name="simple">
    Counter: {{counter}} <br/>
    <button>Increase</button>
</template>

和客户端脚本

var counter = 0;

Template.simple.counter = function () {
    return counter;
}

Template.simple.events({
    'click button': function () {
        counter++;
        console.log("counter is ", counter);
        Meteor.flush();
    }
});

单击按钮时，我可以在控制台中看到该counter变量正在正常增加，但 UI 上没有任何反应。为什么？我认为这正是我们Meteor.flush()打算做的。

4

3 回答 3

4

UI 本身并不是响应式的，您需要使用 Meteor 的响应式项目之一。在这种情况下，您可能想要使用Session. 尝试以下操作，而不是您粘贴的第二个脚本：

Session.set('counter', 0); // Initialize a *reactive* variable

Template.simple.counter = function () {
    return Session.get('counter'); // This will automatically update, because Session is reactive
}

Template.simple.events({
    'click button': function () {
        Session.set('counter', Session.get('counter') + 1);
    }
});
于 2013-08-25T18:33:50.760 回答
3

您还可以构建自己的反应式数据源：

if (Meteor.isClient) {
  Sort = {
    sort: 1,

    dep: new Deps.Dependency,

    get: function () {
      this.dep.depend();
      return this.sort;
    },

    toggle: function () {
      this.sort *= -1;
      this.dep.changed();
    }
  };

  Template.leaderboard.players = function () {
    return Players.find({}, {sort: {score: Sort.get(), name: 1}});
  };

  Template.leaderboard.events({
    'click input.sort': function () {
      Sort.toggle();
    }
  });

}
于 2014-02-23T00:02:55.013 回答
0

最新版本的 Meteor 提供了该reactive-var软件包，请参见此处：http ://docs.meteor.com/#/full/reactivevar_pkg

要使用 ReactiveVar，请通过在终端中运行将 reactive-var 包添加到项目中：

meteor add reactive-var
于 2015-05-01T19:12:57.047 回答