Very Basic Example

help
1

I’m working through the Tutorial and had a simple (I hope) question.

If I didn’t want this to be “Tasks” but some other name for example a list of “Words” - which words change in the HTML and in the JS?

I think I’m confused by the plurals. Tasks, Task and also unsure about the use of “text” in the following:

<head>
  <title>clm02</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> addWord}}
  <ul>
      {{#each words}}
        {{> word}}
      {{/each}}
    </ul>
</body>

<template name="addWord">
	<form class="new-word">
    	<input type="text" name="word" placeholder="Type to add a new word" />
    </form>
</template>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

<template name="word">
  <li>{{text}}</li>
</template>

JS:
Words = new Mongo.Collection(“words”);

if (Meteor.isClient) {
  // This code only runs on the client
  // counter starts at 0
  Session.setDefault('counter', 0);
  Template.body.helpers({
    words: function () {
      return Words.find({});
    }
  });


  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.body.events({
    "submit .new-word": function (event) {
      // Prevent default browser form submit
      event.preventDefault();
 
      // Get value from form element
      var text = event.target.text.value;
 
      // Insert a task into the collection
      Words.insert({
        text: text,
        createdAt: new Date() // current time
      });
 
      // Clear form
      event.target.text.value = "";
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}
2

So in your example you have:

{{#each words}}
  {{> word}}
{{/each}}

words refers to the helper, which is in your Template.body.helpers and returns all of the words you have in your words collection. {{> word}} is telling your app that for each word that is returned by your helper (and iterated over through the #each command) to render the word template.

#each iterates over a cursor (or array) and sets the data context accordingly. In your case, that means that for each word that is returned by your helper, your {{text}} could be thought of as word.text. Which makes sense, as your insert creates a text field that you populate with the value from an event.

Hope this helps – I’d suggest reading over http://guide.meteor.com/blaze.html#builtin-block-helpers, as a lot of this is covered there!

1 Like
3

Just adding the corrected example for reference:

words.html:

<head>
  <title>clm02</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>
  {{> addWord}}
  <ul>
    {{#each words}}
      {{> word}}
    {{/each}}
  </ul>
</body>

<template name="addWord">
  <form class="new-word">
    <input type="text" name="word" placeholder="Type to add a new word" />
  </form>
</template>

<template name="word">
  <li>{{text}}</li>
</template>

words.js:

Words = new Mongo.Collection('words');

if (Meteor.isClient) {

  Template.body.helpers({
    words() {
      return Words.find();
    }
  });

  Template.addWord.events({
    'submit .new-word'(event) {
      event.preventDefault();
      const text = event.target[0].value;
      Words.insert({
        text: text,
        createdAt: new Date()
      });
      event.target[0].value = '';
    }
  });

}
1 Like