流星说 Iron Router 未通过 Intellij 解决

Question

我正在使用 Intellij 和 Meteor 创建一个应用程序，我正在尝试使用 Iron Router 创建多个页面，但是当我在 Javascript 文件中调用 Router 时，它说 Router is一个未解析的变量，并且该路由是一个未解析的函数或方法。我检查了 meteor 文件夹，似乎所有 Iron Router 文件都加载正常。在我正在处理的根页面底部说

Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/."

如果我导航到 http://localhost:3000/about，这是我唯一设置了路线的页面，该页面是空白的，除了我的导航栏。

这是我的 javascript 文件...

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

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

if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    items: function () {
      return Items.find({});
    },
    found_items: function () {
      return Found_items.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.body.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.body.events({
    "click .remove": function(event) {
      event.preventDefault();

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

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

这里是 HTML 文件

<head>
  <title>Grocery List</title>
</head>

<template name="home">
<body>
<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 '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}}
  <h3>Please log in first.</h3>
{{/if}}
</body>
</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="about">
  <head>
    <title>About Grocery List</title>
  </head>

  <body>
  <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 'about'}}" class="menuLink">About</a></li>
    </ul>
  </div>
  <div  class="container">
    <header><h1>About</h1></header>
    <p>This application was created using Meteor. It 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.<br>
      Users can also save their previous lists to either reuse them, or compare current prices to previous ones.<br>
      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>
  </div>
  </body>
</template>

Answer 1

您必须添加带有 / 的路由才能调用 localhost:3000

路由示例

Router.configure({
  layoutTemplate: 'layout',  
});

Router.route('/', function () {
  this.render('home');  
},{
    name: 'home'
});

Router.route('/about', function () {
  this.render('about');
},{
    name: 'about'
});

html

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

<template name="home">
    <p>i am the homepage</p>
</template>

<template name="about">
    <p>i am the about page</p>
</template>

Answer 2

始终为根添加路由。

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

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

顺便说一句，您的模板中有一个 head 和 body 部分。已呈现但在您的浏览器中没有效果。

对 IR 的模板助手使用以下语法 pathFor:

<ul class="menu">
  <li class="menuItem">{{> loginButtons}}</li>
  <li class="menuItem"><a href="{{ pathFor 'home'}}">Home</a></li>
  <li class="menuItem"><a href="{{ pathFor 'about'}}" class="menuLink">About</a></li>
</ul>

为了让您的代码正常工作，我还解决了几个问题：

删除了模板中的 head 和 body 标签。
已将 Template.body.helpers 重命名为 Template.home.helpers。
已将 Template.body.events 重命名为 Template.home.events。

现在正在向 collection 添加新项目并显示项目。

流星说 Iron Router 未通过 Intellij 解决

meteor saying Iron Router is unresolved with Intellij

javascript

html

meteor

intellij-idea

iron-router