meteor - 将模板动态插入表格行

Question

我有一个表格，其中包含来自集合的数据。当用户单击一行时，我想用表单替换该行的内容以编辑内容。如果可能的话，如果没有 jQuery，流星的方法是什么？

<template name="table">
  <table>
    {{#each items}}
    {{> showrow}}
    {{else}}
  </table>
</template>

<template name="showrow">
  <tr>
    <td>{{name}}</td>
  </tr>
</template>

<template name="editrow">
  <tr>
    <form>
      … form html …
    </form>
  </tr>
</template>

从本质上讲，我认为它是关于用for onw 行替换showrow模板。editrow这是一个合理的方法吗？任何指针？

Answer 1

好的，这比预期的要容易。流星 1:0：

我在数据属性中使用 MongoDB_id作为每一行的标识符：data-id="{{_id}}".

然后我在 -elements 上设置了一个click事件处理程序<tr>：

Template.booking.events({
    'click tr': function(event, template) {
        Session.set(editBookingId, event.currentTarget.getAttribute('data-id'));
    }
});

模板助手监听传入的 id 并在 id 匹配时返回 true：

Template.booking.helpers({
    'isEdited': function(id) {
        return Session.get(editBookingId) == id;
    }
});

在模板中，我决定{{#if}}是显示普通行还是编辑对话框：

{{#if isEdited _id}}EDIT{{/if}}

代码很少。非常好。感谢您的指点。

Answer 2

您可以使用逻辑助手

<template name="table">
  <table>
    {{#each items}}
        {{#if editmode}}
            {{>editrow}}
        {{else}}        
            {{> showrow}}
        {{/if}}
    {{/each}}         
  </table>
</template>

然后在您的模板助手中

Template.table.editrow = function() {
    return (this.editmode)
}

this允许您访问循环中特定项目的集合中的数据上下文。因此，如果您editmode:true对该项目有一个，它将改用编辑行。