Why is Meteor Template Object Not Defined?
Asked Answered
S

2

7

I've been following a tutorial to make a simple forum, after finally getting all the code get together, it tells me 'Template is not defined'

Code of forum.html

<head>
  <title>Forum</title>
</head>
<body>
  {{> form}}
  {{> posts}}
</body>

<template name="posts">
  <h1>Posts</h1>
  <ul>
    {{#each posts}}
      <li>
        <h3>{{title}}</h3>
        <p>{{body}}</p>
      </li>
    {{/each}}
  </ul>
</template>


<template name="form">
  <form>
    <label>Post Title:
      <input type="text" id="title" />
    </label>
    <label>Post Body:
      <textarea id="body"></textarea>
    </label>
    <input type="submit" value="Submit" id="submit"/>
  </form>
</template>

Code of forum.js:

var Posts = new Meteor.Collection('posts');
  if (Meteor.isClient) {
    Template.posts.helpers({
      Posts: function() {
        return Posts.find();
      }
    });
  }

Template.form.events = {
  'click #submit': function(event){
    event.preventDefault();
    var title = $('#title').val();
    var body = $('#body').val();
    Posts.insert({
      title: title,
      body: body
    });
    $('#title, #body').val('');
  }
};

Here's some of the output I get from meteor

W20150211-02:01:42.086(0)? (STDERR)           
W20150211-02:01:42.088(0)? (STDERR) /home/ubuntu/.meteor/packages/meteor-tool/.1.0.40.1ef5dzv++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:173
W20150211-02:01:42.088(0)? (STDERR)                                             throw(ex);
W20150211-02:01:42.088(0)? (STDERR)                                                   ^
W20150211-02:01:42.091(0)? (STDERR) ReferenceError: Template is not defined
W20150211-02:01:42.091(0)? (STDERR)     at app/forum.js:10:1
W20150211-02:01:42.091(0)? (STDERR)     at app/forum.js:23:3
W20150211-02:01:42.091(0)? (STDERR)     at /home/ubuntu/workspace/forum/.meteor/local/build/programs/server/boot.js:205:10
W20150211-02:01:42.092(0)? (STDERR)     at Array.forEach (native)
W20150211-02:01:42.092(0)? (STDERR)     at Function._.each._.forEach (/home/ubuntu/.meteor/packages/meteor-tool/.1.0.40.1ef5dzv++os.linux.x86_64+web.browser+web.cordova/meteor-tool-os.linux.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20150211-02:01:42.092(0)? (STDERR)     at /home/ubuntu/workspace/forum/.meteor/local/build/programs/server/boot.js:116:5
=> Exited with code: 8
=> Your application is crashing. Waiting for file change.
Sill answered 11/2, 2015 at 2:6 Comment(1)
fyi - i had this same error because i accidentally moved one of my clent template folders outside the client folder into the root. so my moving from /partners/partner.html back to /client/partners/partner.html all is better.Outwardbound
P
7

There's 2 problems with your code :

  • Template definition is not available on server so you need to wrap the Template.form definition in a Meteor.isClient condition, or better yet, separate your code using client and server directories.

  • Correct event maps definition needs to use this syntax : Template.form.events({...}); not Template.form.events={...};

Pedestrian answered 11/2, 2015 at 2:13 Comment(0)
H
1

The reason why you are seeing the error that you are is because your second reference to the Template object is not specified to be running explicitly on the client, like your first reference to Template is. The Template object is only available on the client, as detailed in this section of the Meteor documentation. You would just simply need to bring the closing bracket of your if(Meteor.isClient){} code block down to be below your Template.form.events definition.

This, however, brings up the subject of application structure and how to avoid issues like this in the future during further development of your application. If you take a look at this documentation, it is highly recommended that you divide your JS code up into at least two different locations to avoid encountering issues like this in the future. I would suggest moving your var Posts = new Meteor.Collection('posts'); line into a JS file within a top-level server folder (name_of_app_directory/server), and moving all of the other JS code into a JS file within a top-level client folder (name_of_app_directory/client). This way, you can eliminate the need to also include the if(Meteor.isClient){} block in your code, and no more chance for seeing the error that you have.

Also, final thing to consider. When defining your template events object, define it similarly to how you have already defined your template helpers object (Template.form.events({...})). For more information on this, see this documentation.

Handgrip answered 10/8, 2015 at 11:2 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.