CODEWITHSUNDEEP
javascripthtmljavascript-frameworkmeteorhandlebars.js
Jeff Lam Tian Hung
Jeff Lam Tian Hung

Reputation: 125

Meteor Page Re-rendering with Backbone router

I'm trying to create a blog application with Meteor. In this blog there is the main page where visitors will simply read the posts, and another section where it would be the 'admin' panel where I can edit posts. I'm trying to utilize the handlebars Template helpers but I'm not sure where I got it wrong. I'm also a amateur developer and trying to learn the Meteor framework better. My code is as such:

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 (server-side code only)

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

The page would render the blog posts with the above code, but when I access localhost:3000/admin the page variable is set to 'admin' as coded, but the page/template doesn't re-render itself to display the 'Admin' text.

However, if I were to set the var page = 'admin' and refresh the app, the page rerenders the admin message just fine. I'm not sure if I'm using the handlebars template helpers correctly to do this sort of 'one-page template refresh with routing'. Thanks for any help!

Upvotes: 3

Views: 1831

Answers (1)

Joc
Joc

Reputation: 1059

Your variable 'page' is not reactive, just a plain JavaScript variable. It has no way of notifying Meteor of changes.

When I started using Meteor I put the page 'code' into a Session variable for similar purposes and this will trigger your page updates. For example:

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

and in your Router:

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

(Although you probably want to put the Session.set bit in it's own function)

Because Session variables are reactive in the Meteor framework and will notify when changed.

Upvotes: 6

Related Questions