如何在流星模板的動態字段上使用X-editable？

我想在一個表中顯示整個集合，使「名稱」字段就地編輯的每一行與X-editable 如何在流星模板的動態字段上使用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節點可用，所以我把這個在我不能運行這些‘模板的渲染’回調。

問題是，每次集合更改時，都會調用呈現方式，然後將新的可編輯元素附加到每個DOM節點以及另一個回調函數。這意味着每當保存「名稱」時都會發生內存泄漏和多次回調。

很明顯我做錯了，但我不知道哪裏正確的地方是調用可編輯和on（'保存'，功能（））？

來源

2013-02-21 jpeskin

每次渲染後調用可編輯的似乎是可靠的（雖然我想象可能會導致內存泄漏）。但是，如果你希望綁定到像「拯救」，你應該確保取消綁定現有的所有事件的事件，否則你將繼續結合新的節省每一個渲染事件：

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

    };

我只呼籲編輯實驗第一次渲染模板。只要你確保在模板被破壞的時候再次調用它（例如使用動態創建和銷燬模板的路由器），那麼這種模式大部分都是有效的。但是有些情況看起來並不奏效，所以我在每次渲染之後都恢復爲只能調用可編輯。

來源

2013-02-27 20:09:28 jpeskin

難道你不能只記得你是否已經設置了可編輯和事件監聽器，如果你已經有了，不要這樣做嗎？

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

來源

2013-02-21 01:14:19 Rahul

這比這更麻煩一點，因爲可編輯必須在每個DOM節點上運行。所以我必須遍歷每個節點並在運行可編輯和開啓（'保存'）之前檢查它的狀態。這是一個解決方案;我只是不確定它是否是最好的。 – jpeskin 2013-02-21 01:19:52

如果可以，我會留下評論，但我現在只有29rep。這樣的痛苦。無論如何。

我在流星0.7.2中有x-editable工作，但自升級到0.8.0以後，它不再呈現正確。我傾向於最終得到一堆Empty標籤。這是令人沮喪的，因爲數據在那裏，而不是在渲染函數被觸發時。

現在使用x-editable的最好方法是渲染只觸發一次，但不確保數據在那裏。

我正在使用Iron Router，我的模板沒有嵌入{{#each}}塊，這似乎是新渲染模型的基本解決方案。

來源

2014-04-04 15:53:49 yankeyhotel

如何在流星模板的動態字段上使用X-editable？

回答

相關問題