我可以利用現有的Meteor模板插入新項目嗎？

我有一個Meteor應用程序，它創建一個項目列表。我有一個流星模板，代表一個單獨的項目。可以說我的應用程序中的邏輯創建了一個包含4個項目的列表。我在頁面上也有一個按鈕，每次按它時都應該將一個項目插入頁面上現有列表的末尾。這樣做的最佳方式是不需要將項目添加到數據庫中（理想情況下，我想重新使用現有的Meteor項目模板）？我可以利用現有的Meteor模板插入新項目嗎？

來源

2015-04-04 JoeTidee

您應該已經爲項目列表定義了一個幫助器，它只是列出了數據庫中的所有項目。例如：

Template.Items.helpers({ 
    all_items: function() { 
     return Items.find(); 
    } 
})

對於該按鈕，您應該定義一個點擊事件，觸發點擊並將項目插入到Items Collection中。由於all_items幫助程序是被動的來源，它會自動更新並在項目的模板中顯示新添加的項目。

Template.Items.events({ 
    'click #add_item': function (event,template) { 
     //catch all the item arguments 

     Items.insert(item) 
    } 
})

來源

2015-04-04 01:16:08 Mateus

我已經更新的問題指出，我還不想添加項目到數據庫。 – JoeTidee 2015-04-04 10:15:22

爲了完成這個任務，你將需要四樣東西：一個項目列表模板，個別項目模板，模板幫手在您的項目列表模板獲得的項目列表從數據庫中，和您項目列表模板上的添加項目按鈕的事件處理程序。

<template name="itemList"> 
    <button id="addItem" type"button">Add Item</button> 
    {{#each items}} 
     {{> item}} 
    {{/each}} 
</template> 

<template name="item"> 
    // Display anything pertinent to an item here 
</template>

這些是您的兩個模板，第一個是項目列表模板，第二個是單個項目模板。

Template.itemList.events({ 
    'click #addItem': function(event, template) { 
     var item = {}; // Add attributes to the item object as necessary 
     Items.insert(item); 
    } 
}); 

Template.itemList.helpers({ 
    items: function() { 
     return Items.find({}); 
    } 
});

這些是您的項目列表模板事件處理程序和模板助手。當addItem按鈕被按下時，事件處理程序將一個新項目插入到Items集合中，並且模板幫助程序將檢索項目列表模板的{{#each}}聲明中要使用的所有項目的列表。

來源

2015-04-04 01:51:19 n4tiv3pwnst4r

我已經更新了問題，指出我不想將項目添加到數據庫。 – JoeTidee 2015-04-04 10:15:15

因此，基於你的問題編輯，你基本上想做一個'軟'添加到模板列表顯示的項目列表，而不更新數據庫？爲了讓我理解正確，你是否想要做這樣的兩步過程：單擊添加按鈕以顯示列表中的新項目，更新該項目的某些字段，然後單擊此保存按鈕新物品？ – n4tiv3pwnst4r 2015-04-04 10:21:27

是的，這是完全正確的:) – JoeTidee 2015-04-04 14:38:53

您仍然可以在不向數據庫發送任何內容的情況下使用集合。如果您使用null創建集合，則該集合將僅在會話期間存在於瀏覽器中。

Items = Meteor.Collection(null); // Somewhere in your client code

從docs

如果傳遞null作爲名稱，那麼你要創建一個本地集合。它在任何地方都不同步;它只是一個本地暫存器，支持Mongo風格的查找，插入，更新和刪除操作。（在客戶端和服務器，這暫存器使用Minimongo實現的。）

編輯

這裏是合併兩個集合的good example。這是一個什麼樣子與當地收集

dbtest.js

serverCollection = new Meteor.Collection('dbtest_names'); 

if (Meteor.isClient) { 

    localCollection = new Meteor.Collection(null); 

    Template.hello.helpers({ 
    names: function() { 
     var namesFromDB = serverCollection.find().fetch(); 
     var localNames = localCollection.find().fetch(); 
     var allNames = namesFromDB.concat(localNames); 
     return _.sortBy(allNames, function (curr) { 
     return curr.name; 
     }); 
    } 
    }); 

    Template.hello.events({ 
    'click button': function() { 
     localCollection.insert({ name: 'will' }); 
    } 
    }); 
} 

if (Meteor.isServer) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    if (serverCollection.find().count() === 0) { 
     // insert default entries 
     serverCollection.insert({ name: 'peter' }); 
     serverCollection.insert({ name: 'scotty' }); 
     serverCollection.insert({ name: 'zelda' }); 
    } 
    }); 
}

dbtest.html

<head> 
    <title>dbtest</title> 
</head> 

<body> 
    <h1>Welcome to Meteor!</h1> {{> hello}} 
</body> 

<template name="hello"> 
    <button>Click Me</button> 
    {{#each names}} 
    <h3>{{name}}</h3> 
    <br> 
    {{/each}} 
</template>

來源

2015-04-09 09:01:28 Will03

如果我有一系列物品形成遠程數據庫和本地數據庫中的一個物品，Meteor如何正確地訂購清單？ – JoeTidee 2015-04-09 17:48:46

剛剛添加了一個可能會回答你的問題的例子。流星不合並和排序列表，但下劃線確實（這是爲什麼該軟件包默認包含在內）。 – Will03 2015-04-10 06:12:43

謝謝你。一個問題是，你如何填充遠程集合，即實際上在Mongo中存儲新的列表項目。它僅僅是一種插入本地和遠程集合的情況，或者2）抓取本地集合的想法，插入到遠程集合中，只是爲頁面的一部分（列表所在的位置）關閉反應性？ – JoeTidee 2015-04-24 09:01:57

我可以利用現有的Meteor模板插入新項目嗎？

回答

相關問題