Meteor.js將項目從一個集合移動到另一個集合

因此，我正在嘗試爲學校項目製作購物清單應用程序。我想要的是用戶能夠列出物品清單，然後當他們發現它們將物品移至「已找到物品」列表時，同時輸入物品的銷售價格。我爲他們正在尋找的物品有兩個Mongo收藏「物品」，而他們找到的物品有「Found_items」。我無法將物品從物品移至Found_items。他們確實從項目中刪除，但似乎沒有被放入Found_items，或者至少它們沒有顯示在UI上。我很確定他們的問題在點擊「找到」按鈕時會發生什麼。我的代碼如下...Meteor.js將項目從一個集合移動到另一個集合

project.html

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

<body> 
<div class="container"> 
    <header> 
    <h1>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> 
</body> 

<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> 
    <span class="text">{{text}}</span> 
    </li> 
</template>

project.js

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

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({}); 
    } 
    }); 


    Template.body.events({ 
    "submit .new-item": function (event) { 
     event.preventDefault(); 

     var text = event.target.text.value; 

     Items.insert({ 
     text: text 
     }); 

     event.target.text.value = ""; 
    } 
    }); 

    Template.item.events({ 
    "click .found": function (event) { 
     Items.remove(this._id); 

     event.preventDefault(); 

     var price = event.target.price.value; 
     var text = event.target.text.value; 

     Found_items.insert({ 
     text: text, 
     price: price 
     }); 

    } 
    }); 
}

任何解釋，我在做什麼錯將不勝感激。

來源

2015-11-26 cteeters

如果擁有1個集合並且只是讓這些項目有一個名爲「found」的字段，並檢查它是否屬實，那麼它會更容易。會比2個系列更容易獲得 – Valentin

回想起來，是的，這可能會更容易... – cteeters

唯一的問題是您的「click.found」處理程序，因爲event.target是按鈕，它沒有price或text屬性。

將其更改爲：

Template.item.events({ 
    "click .found": function (event) { 

     event.preventDefault(); 
     var price = Template.instance().find('[name="price"]').value; 
     var text = Template.instance().find('.text').textContent; 

     Items.remove(this._id); 
     Found_items.insert({ 
     text: text, 
     price: price 
     });

而且事件處理程序傳遞兩個參數，事件對象，並且該處理程序上定義的模板實例。所以，你可以把它改成：

Template.item.events({ 
    "click .found": function (event, template) { 
     event.preventDefault(); 
     var price = template.find('[name="price"]').value; 
     var text = template.find('.text').textContent; 

     ... 

     });

因爲this包含用於創建這個（項目）模板的數據上下文，可以進一步簡化這個：

"click .found": function (event, template) { 
    this.price = template.find('[name="price"]').value; 
    Items.remove(this._id); 
    Found_items.insert(this); 
}

event.preventDefault（）也已被移除，因爲沒有默認操作來阻止此目標（在您的其他活動中需要此操作，因此事件形式爲submit）。

來源

2015-11-26 04:56:52 JeremyK

這樣做。非常感謝！ – cteeters

只是做Found_items.insert(this)

確保您發佈並妥善訂閱此集合。

來源

2015-11-26 04:48:38

Meteor.js將項目從一個集合移動到另一個集合

回答

相關問題