在 Meteor 应用程序中使用更新的数据值更改 UI答案

【问题标题】：Changing UI with updated data values in Meteor app在 Meteor 应用程序中使用更新的数据值更改 UI
【发布时间】：2015-01-18 19:19:42
【问题描述】：

我目前正在使用 Meteor 开发一款仅限离线使用的移动应用。我使用 HTML5 本地存储来实现持久性。

我有一个模板和一个变量，一个整数

<head>
  <title>counter-a</title>
</head>

<body>

  {{> counts}}
</body>

<template name="counts">
  <button>Click Me</button>
  <p id="counts">You've pressed the button {{counts}} times.</p>
</template>

我有那个模板的助手来设置模板变量：

    Template.counts.helpers({
    counts: function () {
      return parseInt(localStorage.getItem("counts"));
    }
  });

改变本地存储中items值的是模板上的一个事件：

    Template.counts.events({
    'click button#increase': function () {
      // increment the counter when button is clicked
      localStorage.setItem("counts", parseInt(localStorage.getItem("counts")) + 1);
        //instead can set counts in helper taht s template var to new value in localStorage.
        counts();

    },
});

使用本地存储中的更新值更改用户界面的是document.getlEmentById('counts').innerHTML = localStorage.getItem("counts");

所有的事情都发生在：if(Meteor.isClient) 并且不存在 if(Meteor.isServer)。

我想知道是否有一种方法可以设置不是编写模板变量的html元素的innerHTML，而是使用代码设置模板变量的值，并让Meteor自动更新gui它认为是反应性的数据源，如数据库或会话？如何像 Meteor 在响应式作业中自动访问该模板变量一样手动访问该变量？

那会是那份工作的好习惯吗？由于我的助手计数除了在开始使用innerHTML设置之外没有任何业务。

【问题讨论】：

您知道如何直观地响应模板数据中的反应性变化吗？我有一个非常相似的要求。

标签： meteor meteor-blaze

【解决方案1】：

您有点想使用reactive-var 包中的ReactiveVar，但这不会为您将变量存储在本地存储中；每次将变量设置为新值时，您都需要自己执行此操作。

我想有人为您的特定目的构建了一个包，dispatch:stored-var 似乎这样做了，但我从未使用过它，所以我不知道。

【讨论】：