Meteor.js與鐵路由器按鈕和模板中的表格不工作

Question

我有一個項目使用Meteor.js和鐵路：路由器。在我進行任何路由之前，我的應用只是一個頁面，我的表單和按鈕都工作得很好，但現在我已經路由到多個工作頁面，我的表單和按鈕似乎不是「可點擊的」。 「數據庫中已有的所有內容都會加載並渲染，但現在我無法從應用程序中添加/刪除/更改數據。

下面是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> 

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