Meteor.js with Iron Router buttons and forms in templates not working

Question

I have a project using Meteor.js and Iron:router. Before I had any routing going on, and my application was just one page, my forms and buttons were all working just fine, but now that I have routing to multiple pages working, my forms and buttons don't seem to be "clickable." Everything that is already in the database loads and renders fine, but I now have no way to add/remove/change the data from my application.

Here is the HTML:

<template name="home">
  <title>Grocery List</title>
<div>
  <ul class="menu">
    <li class="menuItem">{{> loginButtons}}</li>
    <li class="menuItem"><a href="{{ pathFor 'home'}}" class="menuLink">Home</a> </li>
    <li class="menuItem"><a href="{{ pathFor 'saved'}}" class="menuLink">Saved Lists</a></li>
    <li class="menuItem"><a href="{{ pathFor 'about'}}" class="menuLink">About</a></li>
  </ul>
</div>
{{#if currentUser}}
<div class="container">
  <header>
    <h1 id="title">Grocery List</h1>

    <form class="new-item">
      <input type="text" name="text" placeholder="Type to add new items" />
    </form>
  </header>

  <ul>
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
</div>
<div class="container">
  <header>
    <h1>Items Found</h1>
  </header>

  <ul>
    {{#each found_items}}
      {{> found}}
    {{/each}}
  </ul>
</div>
<div class="container">
  <header>
    <h3>
      Tax: ${{calcTax}}
    </h3>
    <h2>
      Total: ${{priceSum}}
    </h2>
    <button class="save">Save list</button>
  </header>
</div>
{{else}}
  <div class="container">
  <h3>Please log in first.</h3>
  </div>
{{/if}}
</template>

<template name="about">
  <title>About Grocery List</title>
  <div>
    <ul class="menu">
      <li class="menuItem">{{> loginButtons}}</li>
      <li class="menuItem"><a href="{{ pathFor 'home'}}" class="menuLink">Home</a> </li>
      <li class="menuItem"><a href="{{ pathFor 'saved'}}" class="menuLink">Saved Lists</a></li>
      <li class="menuItem"><a href="{{ pathFor 'about'}}" class="menuLink">About</a></li>
    </ul>
  </div>
  <div  class="container">
    <header><h1>About</h1></header>
    <p>This application can be used to make, save and update grocery lists. Once the user is in the store, they can use it to check off items on the list, put in the price and see the total, with tax.</p>
    <p>Users can also save their previous lists to either reuse them, or compare current prices to previous ones.</p>
    <p>Future implementations of this page would also allow the user to change the tax rate depending on their location, and include coupons and other discounts in the pricing.</p>
    <h3>
      Coding Environments
    </h3>
    <ul>
      <li>IntelliJ IDEA</li>
    </ul>
    <h3>
      Frameworks
    </h3>
    <ul>
      <li>Meteor</li>
      <li>Iron Router</li>
    </ul>
    <h3>
      Languages
    </h3>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript</li>
    </ul>
  </div>
</template>

<template name="saved">
  <title>Saved Lists</title>
  {{#if currentUser}}
  <div>
    <ul class="menu">
      <li class="menuItem">{{> loginButtons}}</li>
      <li class="menuItem"><a href="{{ pathFor 'home'}}" class="menuLink">Home</a> </li>
      <li class="menuItem"><a href="{{ pathFor 'saved'}}" class="menuLink">Saved Lists</a></li>
      <li class="menuItem"><a href="{{ pathFor 'about'}}" class="menuLink">About</a></li>
    </ul>
  </div>

  <div class="container">
    <header><h1>Your Saved Lists</h1></header>

    <ul>
      {{#each saved_items}}
        {{> save}}
      {{/each}}
    </ul>
  </div>
  {{else}}
    <div class="container">
      <h3>Please log in first.</h3>
    </div>
  {{/if}}
</template>

<template name="item">
  <li>
    <button class="found">Got it!</button>

    <input type="number" name="price" placeholder="Sale Price" />

    <span class="text">{{text}}</span>
  </li>
</template>

<template name="found">
  <li>
    <button class="remove">&times;</button>
    <span class="text">{{text}}</span>
    <span class="price">{{price}}</span>
  </li>
</template>

<template name="save">
  <li>
    <span class="text">{{text}}</span>
  </li>
</template>

And here is the Javascript:

Items = new Mongo.Collection("items");
Found_items = new Mongo.Collection("found_items");
Saved_lists = new Mongo.Collection("saved_lists");

Router.route('home', {path: '/'}); // Add this route
Router.route('about', {path: '/about'});
Router.route('saved', {path: '/saved'});

if (Meteor.isClient) {
  // This code only runs on the client
  Template.home.helpers({
    items: function () {
      return Items.find({});
    },
    found_items: function () {
      return Found_items.find({});
    },
    saved_items: function () {
      return Saved_lists.find({});
    },
    priceSum: function(){

      var userItems = Found_items.find({
        userId: this._id
      }).fetch();

      var prices = _.pluck(userItems, "price");

      var totalTaxed = _.reduce(prices, function(sum, price){
        var total = sum + parseFloat(price);
        return total + (total * 0.04712);
      }, 0);

      return totalTaxed.toFixed(2);
    },
    calcTax: function () {
      var userItems = Found_items.find({
        userId: this._id
      }).fetch();

      var prices = _.pluck(userItems, "price");

      var tax =  _.reduce(prices, function(sum, price){
        return (sum + parseFloat(price)) * 0.04712;
      }, 0);

      return tax.toFixed(2);
    }
  });


  Template.home.events({
    "submit .new-item": function (event) {
      event.preventDefault();

      var text = event.target.text.value;

      Items.insert({
        text: text,
        createdAt: new Date(),
        owner: Meteor.userId(),
        username: Meteor.user().username
      });

      event.target.text.value = "";
    }
  });

  Template.item.events({
    "click .found": function (event, template) {

      event.preventDefault();
      var price = template.find('[name="price"]').value;
      var text = template.find('.text').textContent;

      Items.remove(this._id);
      Found_items.insert({
        text: text,
        price: price
      });

    }
  });

  Template.home.events({
    "click .save": function(event) {
      event.preventDefault();

      var list = Found_items.find({
        userId: this._id
      }).fetch();

      Saved_lists.insert(list);
    }
  });

  Template.found.events({
    "click .remove": function(event) {
      event.preventDefault();

      Found_items.remove(this._id);
    }
  });

  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });
}

Answer 1

ok add a layout config first like that

Router.configure({layoutTemplate: 'layout'});
Router.route('home', {path: '/'}); // Add this route
Router.route('about', {path: '/about'});
Router.route('saved', {path: '/saved'});

in your html add

<template name="layout">
   {{>yield}}
</template>

this should solve your problem but you have some other errors in your code and in your insert to collection and you have assign a lot of helpers in wrong templates,if you want i could recreate your app and show you just ask.