如何在meteor.js 上多次使用同一个模板答案

【问题标题】：how can I use the same template multiple times on meteor.js如何在meteor.js 上多次使用同一个模板
【发布时间】：2013-06-25 09:00:26
【问题描述】：

我大约一周前才开始使用流星，我正在尝试编写我的第一个应用程序来记录项目的时间。

在一天结束时，用户可以在包含 2 个下拉选择菜单的单行中登录并记录他们的工作时间。首先是客户端下拉。然后基于该客户（使用 Session），客户项目的第二个下拉菜单将自动填充，最后允许您在文本输入中输入您的时间。

我有这个工作，但我还需要实现一个按钮，以便您可以一次添加多行。有点像 jQuery Clone()，以防用户在不同的客户端或客户端项目上工作。

单击 newRow 后，我尝试重新渲染该行，但随后第二行操纵了第一行，因为我假设它们都引用了相同的模板。

为了简化？ 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();
}

});

【问题讨论】：

标签： mongodb templates meteor handlebars.js

【解决方案1】：

在我看来，有两种方法可以做到这一点。由于 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，因为它会与数据存储无缝更新。

【讨论】：