流星说 Iron Router 无法通过 Intellij 解决答案

【问题标题】：meteor saying Iron Router is unresolved with Intellij流星说 Iron Router 无法通过 Intellij 解决
【发布时间】：2016-03-03 10:52:57
【问题描述】：

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

糟糕，客户端或服务器上似乎没有 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>

【问题讨论】：

标签： javascript html meteor intellij-idea iron-router

【解决方案1】：

始终为根添加路由。

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>

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

删除了模板中的头部和身体标签。
将 Template.body.helpers 重命名为 Template.home.helpers。
将 Template.body.events 重命名为 Template.home.events。

现在它正在向集合中添加新项目并显示项目。

【讨论】：

感谢这些提示，但它没有解决 IntelliJ 说路由器对象是未解析变量的问题。在解决该问题之前，似乎没有任何 IR 的 Javascript 将起作用。
在为根路由设置路由后，您仍然收到消息“糟糕，客户端或服务器上似乎没有 url 的路由”？顺便说一句，我自己不使用 IntelliJ，但我能够重现有关丢失路线的 IR 消息。
不，事实上，除了导航栏之外，我没有得到任何渲染。可能是因为我有其他模板与我的“主页”模板一起使用吗？
不确定。我将不得不查看更多您的模板和代码来判断这一点。如果您在 Chrome 中打开调试控制台，输入地址 (http://localhost:3000)，然后查看控制台上的消息？看到奇怪的东西了吗？或者任何消息？
控制台中没有显示任何内容。我已经对其进行了编辑，因此您可以查看整个文件。

【解决方案2】：

你必须用 / 添加一个路由来调用 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>

【讨论】：