約 1 週間前に流星の使用を開始したばかりで、プロジェクトの時間を記録するための最初のアプリを作成しようとしています。
1 日の終わりに、ユーザーは 2 つのドロップダウン選択メニューで構成される 1 つの行にログインして時間を記録できます。まず、クライアントのドロップダウンです。次に、そのクライアントに基づいて (セッションを使用)、クライアント プロジェクトの 2 番目のドロップダウンが自動入力され、最後にテキスト入力で時間を入力できるようになります。
これは機能していますが、一度に複数の行を追加できるようにボタンも実装する必要があります。ユーザーが別のクライアントまたはクライアント プロジェクトで作業した場合の jQuery Clone() のようなものです。
newRow をクリックすると行を再レンダリングしようとしましたが、2 行目は最初の行を操作します。これは、両方とも同じテンプレートを参照していると想定しているためです。
簡素化するには?1) 最後のものの下に複製するにはどうすればよいですか? 2) 1 つ以上の行に同じテンプレートを使用し、それらが互いに影響しないようにするにはどうすればよいですか?
どんな考え/助けも大歓迎です
<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();
}
});