模板中带有 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>

这应该可以解决您的问题，但是您的代码和插入集合中还有一些其他错误，并且您在错误的模板中分配了很多帮助程序，如果您愿意，我可以重新创建您的应用程序并向您展示只是询问。