5

コレクション全体をテーブルに表示し、すべての行の「名前」フィールドをその場で編集可能にし、X編集可能にしたい

最近追加された「セレクター」オプションを使用して、テーブル内のすべての名前に編集可能を付けることができます。

$('#collectionTable').editable({
  selector: '.editable-click',
});

// I also need to setup a 'save' callback to update the collection...

$('a.editable-click').on('save', function(e, params) {
  console.log('Saved value: ' + params.newValue);
  // TBD: update the collection 
});

ただし、テンプレートのレンダリングが完了し、DOMノードが使用可能になるまで、これらのいずれも実行できないため、これをテンプレートの「レンダリングされた」コールバックに配置します。

問題は、コレクションが変更されるたびにrenderedが呼び出され、新しい編集可能オブジェクトが各DOMノードと別のコールバックにアタッチされることです。これは、「名前」が保存されるたびにメモリリークと複数のコールバックが発生することを意味します。

明らかに私はこれを間違っていますが、どこで編集可能でon（'save'、function（））を呼び出すのが適切かわかりませんか？

4

3 に答える 3

2

すべてのレンダリングの後に編集可能と呼ぶことは信頼できるようです（メモリリークを引き起こしている可能性があると思いますが）。ただし、「save」などのイベントにバインドする場合は、必ず既存のすべてのイベントのバインドを解除する必要があります。そうしないと、すべてのレンダリングで新しい保存イベントをバインドし続けることになります。

Template.editableTable.rendered = function() {

    $('#myParentTable').editable({
      selector: '.editable-click'
    });

    $('a.editable-click').unbind('save').on('save', function(e, params) {
      // Make changes to your collection here.
    });

  };

テンプレートの最初のレンダリングで、editableを呼び出すだけで実験しました。これは、テンプレートが破棄された場合に（たとえば、テンプレートを動的に作成および破棄するルーターを使用して）再度呼び出すようにした場合に限り、ほとんど機能しました。しかし、それが機能していないように見えるいくつかのエッジケースがあったので、レンダリングのたびに編集可能と呼ぶことに戻りました。

于 2013-02-27T20:09:28.693 に答える
0

すでに編集可能とイベントリスナーを設定しているかどうかを覚えているだけで、すでに設定している場合は設定しないでください。

if (editable) {
 // enable editable and add the save listener
 // ...
 editable = true;
}
于 2013-02-21T01:14:19.717 に答える
0

できればコメントを残したいのですが、今は29repしかありません。このような痛み。いずれかの方法。

Meteor 0.7.2でx-editableを動作させていましたが、0.8.0にアップグレードすると、正しくレンダリングされなくなりました。私は空のタグの束で終わる傾向があります。レンダリングされた関数が起動されるまでではなく、データがそこにあるため、これはイライラします。

レンダリングが1回だけ起動し、データがそこにあることを確認しない、x-editableを使用するための最良の方法は何ですか。

Iron Routerを使用していますが、テンプレートが{{#each}}ブロックに埋め込まれていません。これは、新しいレンダリングされたモデルの基本的なソリューションのようです。

于 2014-04-04T15:53:49.780 に答える