徹底清除內存中的dijit（dojo）樹並釋放其佔位符

Question

我從一塊一塊的代碼開始，使問題描述變得清晰。

1. 我有一段HTML代碼爲：

   <div id="center" class="column" dojoType="dijit.layout.TabContainer">

   <div id="first" dojoType="dijit.layout.ContentPane" title="first" selected="true"> 
   
       <div id="first_content"></div> 
   
   </div> 
   
   <div id="second" dojoType="dijit.layout.ContentPane" title="second"> 
   
       <div id="second_content"></div> 
   
   </div> 
   

   </div>

2. 我有一個JavaScript功能到的dijit樹木裝入HTML：

功能負載（）

{ 
//load data 
dojo.xhrGet(firsthierarchy("first_content", "file1.json")); 
dojo.xhrGet(secondhierarchy("second_content", "file2.json")); 
} 

function firsthierarchy(node, url){ 
return { 
url: url, 
node: dojo.byId(node), 
handleAs: "json", 
load: loadfirsthierarchy 
}; 
} 

function secondhierarchy(node, url){ 
return { 
url: url, 
node: dojo.byId(node), 
handleAs: "json", 
load: loadsecondhierarchy 
}; 
} 

function loadfirsthierarchy(data, xhr) 
{ 
if(xhr.args.node) 
{ 
store1 = new dojo.data.ItemFileWriteStore({data: data}); 
treeModel1 = new dijit.tree.ForestStoreModel({ 
store: store1, 
query: { 
"type": "continent" 
}, 
rootId: "root", 
rootLabel: "Continents", 
childrenAttrs: ["children"] 
}); 
tree1 = new dijit.Tree({ 
     model: treeModel1, 
    },xhr.args.node.id); 
} 
} 

function loadsecondhierarchy(data, xhr) 
{ 
if(xhr.args.node) 
{ 
store2 = new dojo.data.ItemFileWriteStore({data: data}); 
treeModel2 = new dijit.tree.ForestStoreModel({ 
store: store2, 
query: { 
"type": "continent" 
}, 
rootId: "root", 
rootLabel: "Continents", 
childrenAttrs: ["children"] 
}); 

tree2 = new dijit.Tree({ 
model: treeModel2, 
},xhr.args.node.id); 
} 
} 

所有的上述功能正常工作。現在，我想要有一個重置函數，它可以清除「first_content」和「second_content」div中的現有樹並加載具有新內容的新樹。例如：

功能復位（）

{ 
// here I want to completely wipe out the exiting trees in all of the dojo contentpanes. 
// And I want to load the contentpanes with entire new set of data. 
// Maybe like : 
// dojo.xhrGet(firsthierarchy("first_content", "file3.json")); 
// dojo.xhrGet(secondhierarchy("first_content", "file4.json")); 
} 

我對如何實現復位功能不知道。你能否給我提供一些線索。

Answer 1

保持樹引用的TreeModel和存儲，然後定義你的函數爲：

reset: function() { 
    myTree.destroyRecursive(); 
    myTreeModel.destroyRecursive(); // I'm not 100% sure you need this, destroying the tree may do this automatically 
    delete myStore 
} 

這應該做的伎倆

我會做到這一點的方法是創建使用Dojo模塊。提供了一個叫做TreeWrapper()的處理樹生命週期（獲取數據，創建樹，殺死樹）。這個包裝模塊然後具有上面的重置功能，並且可以包含對所有不同變量的引用。

您還需要跟蹤您對樹的任何dojo.subscribe，並取消訂閱這些樹。