#each塊複製元件後元件移動

我有遍歷集合作爲這樣的模板：#each塊複製元件後元件移動

<template name="task_list"> 
    <form id="tasks"> 
     {{#each tasks}}  
      {{> task}} 
     {{/each}} 
    </form> 
</template> 

<template name="task"> 
    <label class="checkbox" id="label-{{_id}}"> 
     <input type="checkbox" id="{{_id}}" {{{completed}}} /> {{text}} 
    </label> 
</template>

我在此一個jQuery排序，這允許用戶拖動和下降內這個清單。當用戶完成移動項目並完成DOM渲染後，我更新了此模板使用的集合。

這可以在用戶拖拽項目時正常工作，但是當項目被拖拽時，流星會複製剛剛拖動的項目。

enter image description here

在此先感謝您的幫助。

來源

2012-07-03 Gezim

這裏的胡亂猜測，沒有看到JS：

流星是看到的元素的列表不匹配的，它的使用爲each Statement對象的列表，所以它增加了它認爲是缺少的。

當拖動結束時，我會嘗試獲得回調，然後在該回調中確保Meteor知道應該顯示哪些元素的順序，以便當它重新呈現each塊時，它不會「不要混淆元素的正確順序並覆蓋它。

希望這是正確的軌道！將回調導向的代碼與Meteor的反應性結合起來可能會非常棘手。

來源

2012-12-14 02:04:58 zorlak

這裏的問題是，你已經告訴Meteor和jQuery管理相同的DOM元素。他們都試圖更新元素，並最終戰鬥:)這就像駕駛汽車一樣。只有一個人可以一次開車。

你有兩個選擇：

有無流星管理的元素。在這種情況下，你需要找到一種方法來告訴其他庫（在這種情況下，jQuery）實際上並沒有物理地移動DOM中的元素。只要它給你一個回調並讓你知道用戶想要做什麼。然後你更新集合，Meteor更新屏幕。
讓jQuery管理元素。將整個頁面放在{{#constant}}..{{/constant}}之內，Meteor將不再提供。您可以致電<collectionname>.find(<query>).observe({...})並使用jQuery創建/移動/刪除列表項以響應observe爲您提供的回調。（您仍然可以使用Meteor.render使每個單獨的項目產生反應，並且如果需要，您甚至可以使用類似Meteor.render(Template.<mytemplate>)之類的東西生成模板中的項目）。

希望幫助！

來源

2012-12-14 02:41:43 Geoff

#each塊複製元件後元件移動

回答

相關問題