帶有Iron Router按鈕的Meteor.js和模板中的表單不起作用

Question

我有一個使用Meteor.js和Iron：router的項目。 在進行任何路由選擇之前，我的應用程序只有一頁，我的表單和按鈕都可以正常工作，但是現在我可以路由到多個頁面，因此表單和按鈕似乎不是“可單擊的”。 ” 數據庫中已經存在的所有內容都可以加載和呈現，但是現在我無法從應用程序中添加/刪除/更改數據。

這是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>

這是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

好，先像這樣添加一個布局配置

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

在您的html中添加

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

這應該可以解決您的問題，但是您的代碼和插入集合中還有一些其他錯誤，並且在錯誤的模板中分配了很多幫助程序，如果您希望我可以重新創建您的應用程序並向您展示，請問。