0

コレクションからのデータを含むテーブルがあります。ユーザーが行をクリックすると、行の内容をフォームに置き換えて内容を編集したいと考えています。可能であれば、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>

本質的には、showrowテンプレートeditrowを for onw 行に置き換えることだと思います。それは合理的なアプローチですか？ポインタはありますか？

4

2 に答える 2

0

わかりました、それは予想よりも簡単でした。流星の場合は 1:0:

_idデータ属性の各行の識別子としてMongoDB を使用しました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}}

非常に小さなコード。非常に素晴らしい。ポインタをありがとう。

于 2013-06-13T21:55:24.943 に答える
0

論理ヘルパーを使用できます

<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そのアイテムの がある場合は、代わりに編集行を使用します。

于 2013-06-12T15:20:38.003 に答える