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>

基本上，我认为是替换on showrow的{{1}}模板。这是一种合理的方法吗？有什么指针吗？

Answer 1

您可以使用逻辑助手

<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，则会使用编辑行。

Answer 2

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

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

然后我在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}}

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

将模板动态插入表行

2 个答案: