在流星（使用流星路由器）中处理闪光通知的好方法是什么？答案

【问题标题】：What's a good way to handle flash notifications in meteor (with meteor-router)?在流星（使用流星路由器）中处理闪光通知的好方法是什么？
【发布时间】：2014-12-15 21:33:22
【问题描述】：

我使用meteor 和meteor-router 进行客户端和服务器端路由。我想知道处理网站通知的好方法，特别是“flash”类型的通知。

在全局 layout.html 中，如果设置了“消息”会话变量，我可以让车把输出一条消息，但是一旦应用程序被路由到带有 Meteor.Router.to() 的新 URL，该消息就不会一直存在。

什么是“快速”通知的好解决方案？或者，如何在路由到新 URL 后自动清除会话变量。

layout.html：

<head>
  <title>Meteor App</title>
</head>
<body>
  {{> global-layout}}
</body>

<template name="global-layout">
   {{#if message}}
      <div class="message">{{message}}</div>
   {{/if}}
   {{renderPage}}
</template>

然后在 layout.js 中

Template['global-layout'].message = function () {
  return Session.get('message');
};

【问题讨论】：

我找到了this pull request 和this repo，这似乎是解决方案的开始，但没有关于显示通知的文档。
您应该发布自己的解决方案作为答案，以便对其进行投票和评论。
啊，就是这样。我还没有得到任何工作。该回购似乎具有正确的意图，但它没有显示如何将通知放在模板上。我会继续探索它。

标签： javascript meteor

【解决方案1】：

我为此使用了Meteor.Router.filter。此过滤器将应用于所有路由，因此所有 url 更改都会清除所有闪烁。

routes.js

Meteor.Router.filters({
  // clearSeenMessages filter clears all seen messages. 
  // This filters is applied to all pages 
  clearSeenMessages: function (page) {
    flash.clear();
    return page;
  },
});

// applies to all pages
Meteor.Router.filter('clearSeenMessages');

这是其余的实现，方面是从telesc.pe借来的

client/views/flashes/flash_item.html

    <template name="flashItem">
      {{#if show}}
        <div class="alert-box {{type}}">
          {{message}}
          <a class="close"  href="">&times;</a>
        </div>
      {{/if}}
    </template>

client/views/flashes/flash_item.js

// When the template is first created
Template.flashItem.created = function () {
  // Get the ID of the messsage
  var id = this.data._id;
  Meteor.setTimeout(function () {
    // mark the flash as "seen" after 100 milliseconds
    flash.Flashes.update(id, {$set: {seen: true}});
  }, 100);
}

client/views/flashes/flashes.html

<template name="flashes">
  {{#each flashes}}
    {{> flashItem}}
  {{/each}}
</template>

client/views/flashes/flashes.js

Template.flashes.flashes = function () {
  return flash.Flashes.find();
}

client/views/app.html

<body>
  <!-- add the flashes somewhere in the body -->
  {{> flashes}}
</body>

client/lib/flashes.js

// flashes provides an api for temporary flash messages stored in a
// client only collecion
var flash = flash || {};

(function (argument) {
  // Client only collection
  flash.Flashes = new Meteor.Collection(null);

  // create given a message and optional type creates a Flash message.
  flash.create = function (message, type) {
    type = (typeof type === 'undefined') ? 'error' : type;
    // Store errors in the 'Errors' local collection
    flash.Flashes.insert({message: message, type: type, seen: false, show: true});
  };

  // error is a helper function for creating error messages
  flash.error = function (message) {
    return flash.create(message, 'error');
  };

  // success is a helper function for creating success messages
  flash.success = function (message) {
    return flash.create(message, 'success');
  };

  // info is a helper function for creating info messages
  flash.info = function (message) {
    return flash.create(message, 'info');
  };

  // clear hides viewed message
  flash.clear = function () {
    flash.Flashes.update({seen: true}, {$set: {show: false}}, {multi: true});
  };
})();

用法

flash.success('This is a success message');
flash.error('This is a error message');
flash.info('This is a info message');

【讨论】：

啊哈，使用过滤器非常聪明，诀窍是您将它们标记为已看到。
@Diogenes，我不能相信来自telesc.pe 的“已见”技巧。 source 有很多有用的技术。

【解决方案2】：

您现在可以使用atmosphere 上提供的router-with-flash 包来处理Flash 通知。如果你使用陨石（你应该），你可以在你的项目的根目录中做mrt add router-with-flash。然后，要显示警报，您需要 -

Meteor.Router.to("/", { alert: "Some alert..." });
Meteor.Router.notification("alert");

这将显示警报，直到下次调用 Meteor.Router.to()。

【讨论】：

但目标是让通知（可能是成功、警报或错误类型）出现，然后在下一次 .to() 调用时自动消失。手动将该会话变量设置为 null 意味着您可以切换到的每个可能的视图都必须这样做。
在atmosphere上找到router-with-flash包后更改了答案。
我之前发现过（请参阅我对问题的评论），但无法弄清楚这些通知应该如何显示在模板中。