Question

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

在一天结束时，用户可以使用包含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();
}

});

Answer 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，因为它将与数据存储无缝更新。

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

1 个答案: