1

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

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

我有这个工作，但我还需要实现一个按钮，以便您可以一次添加多行。有点像 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();
}

});
4

1 回答 1

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

于 2014-07-08T11:03:23.933 回答