使用 Backbone 路由器重新渲染 Meteor 页面答案

【问题标题】：Meteor Page Re-rendering with Backbone router使用 Backbone 路由器重新渲染 Meteor 页面
【发布时间】：2012-10-10 13:25:56
【问题描述】：

我正在尝试使用 Meteor 创建一个博客应用程序。在这个博客中，有一个主页，访问者可以简单地阅读帖子，另一个部分是“管理”面板，我可以在其中编辑帖子。我正在尝试使用车把模板助手，但我不确定我哪里弄错了。我也是一名业余开发人员，并试图更好地学习 Meteor 框架。我的代码是这样的：

blog.html

<head>
  <title>Jeff Lam Tian Hung</title>
</head>

<body>
  <h1>Jeff Lam Tian Hung</h1>
  <a href="/" class="main">Main Page</a>
  <a href="/admin" class="admin">Admin</a>
  {{> content}}
</body>

<template name="content">
  {{#if currentPage "blog"}}
    {{#each posts}}
      <h2>{{Title}}</h2>
      <p>{{Body}}</p>
    {{/each}}
  {{/if}}

  {{#if currentPage "admin"}}
    <h2>{{admin}}</h2>
  {{/if}}
</template>

blog.js

// Declaration of Collections
Posts = new Meteor.Collection("Posts");

// Helper variable is for pages
// TODO: changing this var will change the
// page but now how to rerender the page?
var page = "blog";

// Declaration of Template Reactivity Variables
Template.content.currentPage = function (type) {
  return page === type;
};
Template.content.posts = function () {
  return Posts.find({}, {sort: {Date: 1}});
};
Template.content.admin = function () {
  return "This will render admin section";
};

// Router for Pages
var Router = Backbone.Router.extend({
  routes: {
    "":      "main",
    "admin": "admin"
  },
  main: function () {
    page = "blog";
  },
  admin: function () {
    page = "admin";
  }
});

var BlogRouter = new Router;

Meteor.startup(function () {
  Backbone.history.start({pushState: true});
});

publish.js（仅限服务器端代码）

Posts = new Meteor.Collection("Posts");

该页面将使用上述代码呈现博客文章，但是当我访问 localhost:3000/admin 时，页面变量设置为 'admin' 作为编码，但页面/模板不会重新呈现自身以显示“管理员”文本。

但是，如果我设置 var page = 'admin' 并刷新应用程序，该页面会重新呈现管理消息就好了。我不确定我是否正确使用了车把模板助手来执行这种“带路由的单页模板刷新”。感谢您的帮助！

【问题讨论】：

标签： javascript html javascript-framework meteor handlebars.js

【解决方案1】：

您的变量“页面”不是响应式的，只是一个普通的 JavaScript 变量。它无法通知 Meteor 的变化。

当我开始使用 Meteor 时，出于类似目的，我将页面“代码”放入 Session 变量中，这将触发您的页面更新。例如：

// Declaration of Template Reactivity Variables
Template.content.currentPage = function (type) {
    return Session.equals("page", type);
};

在你的路由器中：

...
Session.set("page", "admin");
…

（尽管您可能希望将 Session.set 位放在它自己的函数中）

因为 Session 变量在 Meteor 框架中是反应式的，并且会在更改时通知。

【讨论】：

谢谢！但是有一个小错误：应该是“return Session.equals("page", type)”而不是“return Session.get("page")”来完成该功能。但你指出我在正确的轨道所以非常感谢你！
哈，是的，对不起，我正在考虑我自己的代码，但是理论是一样的。说我现在不太使用这种方法，因为它需要大量的“if”语句，随着您的网站的增长，这些语句会变得非常混乱，现在使用更加动态的方法。
谢谢。也许几天后我会更好地理解流星，并且可以为此创建自己的反应性上下文。有人试过流星路由器吗？ github.com/tmeasday/meteor-router 可悲的是，如果我尝试使用它，我会遇到很多错误:(
嘿dustin.b，Meteor 有几个路由器，包括Britto 博客包。但是在搜索了这么久之后，我真的很想暂时不要使用外部包......而且这种方法最适合多页面路由。
@Joc，愿意分享你的动态方法吗？现在我基本上在模板中使用模板，因此随着应用程序的增长，它仍然非常易于管理，因为每个“页面”都在一个模板中，其中一个会话变量链接到主干路由器功能。