Meteor 投票

ute('/', { name: 'home', controller: NewPostsController});Router.route('/new/:postsLimit?', {name: 'newPosts'});Router.route('/best/:postsLimit?', {name: 'bestPosts'});注意现在我们有多个路由，我们将 nextPath 逻辑从 PostsListController 移到 NewPostsController 和 BestPostsController, 因为两个控制器的 path 都不相同。另外，当我们根据投票数排序时，然后根据发布时间戳和 _id 确保顺序。有了新的控制器，我们可以安全的删除之前的 postList 路由。删除下面的代码： Router.route('/:postsLimit?', { name: 'postsList' })在 header 中加入链接：<template name="header"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{pathFor 'home'}}">Microscope</a> </div> <div class="collapse navbar-collapse" id="navigation"> <ul class="nav navbar-nav"> <li> <a href="{{pathFor 'newPosts'}}">New</a> </li> <li> <a href="{{pathFor 'bestPosts'}}">Best</a> </li> {{#if currentUser}} <li> <a href="{{pathFor 'postSubmit'}}">Submit Post</a> </li> <li class="dropdown"> {{> notifications}} </li> {{/if}} </ul> <ul class="nav navbar-nav navbar-right"> {{> loginButtons}} </ul> </div> </div> </nav></template>最后，我们还需要更新帖子的删除 deleting 事件处理函数: 'click .delete': function(e) { e.preventDefault(); if (confirm("Delete this post?")) { var currentPostId = this._id; Posts.remove(currentPostId); Router.go('home'); } }这些都做完了，现在我们得到了一个最佳帖子列表：更好的 Header现在我们有两个帖子列表页面，你很难分清你正在看的是哪个列表。现在让我们把页面的 header 变得更明显些。我们将创建一个 header.js manager 并创建一个 helper 使用当前的路径和一个或者多个命名路由来给我们的导航条加一个 active class:支持多个命名路由的原因是 home 和 newPosts 路由 (分别对应 URL / 和 new) 使用同一个模板。这意味着我们的 activeRouteClass 足够聪明可以处理以上情形将 <li> 标签标记为 active。<template name="header"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{pathFor 'home'}}">Microscope</a> </div> <div class="collapse navbar-collapse" id="navigation"> <ul class="nav navbar-nav"> <li class="{{activeRouteClass 'home' 'newPosts'}}"> <a href="{{pathFor 'newPosts'}}">New</a> </li> <li class="{{activeRouteClass 'bestPosts'}}"> <a href="{{pathFor 'bestPosts'}}">Best</a> </li> {{#if currentUser}} <li class="{{activeRouteClass 'postSubmit'}}"> <a href="{{pathFor 'postSubmit'}}">Submit Post</a> </li> <li class="dropdown"> {{> notifications}} </li> {{/if}} </ul> <ul class="nav navbar-nav navbar-right"> {{> loginButtons}} </ul> </div> </div> </nav></template>Template.header.helpers({ activeRouteClass: function(/* route names */) { var args = Array.prototype.slice.call(arguments, 0); args.pop(); var active = _.any(args, function(name) { return Router.current() && Router.current().route.getName() === name }); return active && 'active'; }});Helper 参数到现在为止我们没有使用特殊的设计模式，但是像其他 Spacebars 标签一样，模板的 helper 标签可以带参数。你可以给你的函数传递命名的参数，你也可以传入不指定数量的匿名参数并在函数中用 arguments 对象访问他们。在最后一种情况，你可能想将 arguments 对象转换成一个一般的 JavaScript 数组，然后调用 pop() 方法移除末尾的内容。对于每一个导航链接， activeRouteClass helper 可以带一组路由名称，然后使用 Underscore 的 any() helper 方法检查哪一个通过测试 (例如: 他们的 URL 等于当前路径)。如果路由匹配当前路径，any() 方法将返回 true。最后，我们利用 JavaScript 的 boolean && string 模式，当 false && myString 返回 false, 当 true && myString 返回 myString。现在用户可以给帖子实时投票了，你将看到帖子随着得票多少上下变化。如果有一些动画效果不是更好？