Meteorテンプレートの動的フィールドでX-editableを使用するにはどうすればよいですか？

Question

私はテーブルにコレクション全体を表示し、でインプレース編集可能なすべての行に「名前」フィールドをしたいのですがX-editable

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

$('#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ノードが利用可能なので、私は、これを入れてまで、私はこれらのいずれかを実行することはできません 『テンプレートのレンダリング』コールバック。

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

明らかに私はこれを間違っていますが、正しい場所が編集可能かどうかはわかりません（ 'save'、function（））？

Answer 1

すべてのレンダリング後に編集可能な呼び出しが信頼できると思われます（ただし、メモリリークの原因になる可能性があります）。しかし、あなたはそうしないと、すべてのレンダリングにイベントを保存新しいバインディング続ける、あなたはすべての既存のイベントのバインドを解除することを確認する必要があり、「保存」などのイベントにバインドしたい場合：私だけで編集可能な呼び出しで実験

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. 
    }); 

    }; 

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

Answer 2

すでに編集可能なイベントリスナーと既に設定されているイベントリスナーの両方を覚えているだけではありませんか？

if (editable) { 
// enable editable and add the save listener 
// ... 
editable = true; 
} 

Answer 3

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

私はMeteor 0.7.2での編集が可能でしたが、0.8.0にアップグレードしてからは正しくレンダリングされません。私は空のタグの束で終わる傾向があります。レンダリングされた関数が起動されたときだけではなく、データがそこにあるので、これはイライラします。

x-editableを使用する最良の方法は、今度は1回の呼び出しだけをレンダリングし、データがそこにあることを確認しないことです。

私はIron Routerを使用しています。私のテンプレートは、新しいレンダリングモデルの基本的な解決策であると思われる{{#each}}ブロックに埋め込まれていません。