如何在meteor.js上多次使用相同的模板

我剛剛在一週前開始使用meteor，並且正在嘗試爲我的第一個應用程序編寫一個項目的記錄時間。如何在meteor.js上多次使用相同的模板

在一天結束時，用戶可以進入並記錄他們的小時，其中包含2個下拉選擇菜單。首先是客戶下降。然後基於該客戶端（使用Session），客戶端項目的第二個下拉列表將自動填充，最後允許您在文本輸入中輸入您的小時數。

我有這個工作，但我也需要實現一個按鈕，所以你可以一次添加多行。如果用戶在不同的客戶端或客戶端項目上工作，可以使用類似jQuery Clone（）的方法。

我試圖重新渲染行，一旦newRow被點擊，但第二行操縱第一行，因爲我假設他們都引用相同的模板。

爲了簡化？ 1）如何複製最後一個下面的內容，以及2）如何爲一行或多行使用相同的模板並使它們互不影響？

任何想法/幫助是值得歡迎

<form id="add_time"> 

    <template name="row"> 
    <ul> 
     {{> clientsDD}} 
     {{> projectsDD}} 
     {{> hoursAndTasks}} 
    </ul> 
    </template> 

    <p><a href="#" id="newRow">Add another row</a> 
    <input type="submit" id="submit_hours" value="Submit"/> 

    </form> 

    Template.clientsDD.clients = function() { 

     return Clients.find({}); 

    } 

    Template.projectsDD.projects = function(event) { 

     return Projects.find({"client.clientId" : Session.get("clientSelected")}); 

    } 



Template.addHours.events({ 


'change select[name="clientsDD"]' : function(event){ 

    newClient = $(event.target).val(); 
    Session.set("clientSelected", newClient); 


}, 

'change select[name="projectsDD"]' : function(event){ 

    newProject = $(event.target).val(); 
} 

});

來源

2013-06-27 rmolinares

有在我的腦海兩種方法可以做到這一點。由於Meteor不需要重新加載頁面來更新您的內容。沒有什麼可以阻止你在完成時保存行，然後只是有一個循環來填充頁面。您的形式變成這樣的事情：

<form id="add_time"> 

{{#each rows}} 
    {{> row}} 
{{/each}} 
{{> row}} 

<input type="submit" id="submit_hours" value="Save and Add Another"/> 
<input type="button" id="submit_and_exit" value="Save and Exit"/> 

</form> 

<template name="row"> 
<ul> 
    {{> clientsDD _id}} 
    {{> projectsDD _id}} 
    {{> hoursAndTasks _id}} 
</ul> 
</template>

這將通過rows幫手包含您小時的數據顯示它進行編輯以提供一個新的空行一起循環。這將自動更新保存，無需任何DOM操作。

另一種選擇是複製字段。我不知道有一種方法可以讓你複製一個模板，但沒有理由說爲什麼jQuery克隆類型函數不起作用，但是你需要確保在保存時單獨保存它們。 clientsDD[]作爲輸入名稱應該是可以的，只要您給每組字段一個唯一的ID。

我個人會使用第一種方法作爲恕我直言，這就是Meteor設計的工作方式，所以您不需要操作DOM，因爲它將無縫更新數據存儲。

來源

2014-07-08 11:03:23

如何在meteor.js上多次使用相同的模板

回答

相關問題