Meteor.js Iron Router 按钮和模板中的表单不起作用

Question

我有一个项目使用 Meteor.js 和 Iron:router。在我进行任何路由之前，我的应用程序只有一页，我的表单和按钮都工作正常，但现在我可以路由到多个页面，我的表单和按钮似乎不是 "clickable." 数据库中已有的所有内容都可以正常加载和呈现，但我现在无法 add/remove/change 来自我的应用程序的数据。

这里是 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

ok 像这样先添加布局配置

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>

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

Meteor.js Iron Router 按钮和模板中的表单不起作用

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

javascript

forms

button

meteor

iron-router