एम्बर.जेएस डीओएम से विचार जोड़ रहे हैं और हटा रहे हैं?

Question

मैं पहले sproutCore 1 के साथ काम करने के बाद, ember.js में देख रहा हूं। मैं कुछ उदाहरणों की तलाश कर रहा हूं कि डीओएम से विचार जोड़ने और हटाने के तरीके के रूप में उपयोगकर्ता एप्लिकेशन को नेविगेट करता है।

उदाहरण के लिए, मेरे पास एक ऐसा एप्लिकेशन है जिसमें मामलों का एक सेट होता है और प्रत्येक मामले में वर्कफ़्लो होता है। प्रशासन पृष्ठ भी हैं, आदि

जब उपयोगकर्ता ऐप शुरू करता है, तो एक डैशबोर्ड-जैसे उपयोगकर्ता इंटरफ़ेस दिखाया जाता है। यहां से उपयोगकर्ता उस मामले को लाने के लिए किसी मामले पर खोज या क्लिक करने में सक्षम है। इस बिंदु पर मैं निम्नलिखित करना चाहते हैं:

• मैं डैशबोर्ड के लिए जीयूआई निकालना चाहते हैं, और मैं मामले के लिए जीयूआई दिखाना चाहते हैं - जो नेविगेशन के अपने स्वयं के सेट के साथ अपने आप में एक जटिल जीयूआई है नियम इत्यादि
• इसके अलावा, अगर मैं GUI के भाग जोड़ना और निकालना चाहता हूं, तो उपयोगकर्ता मामले को नेविगेट और मैनिपुलेट करता है।
• जब उपयोगकर्ता "डैशबोर्ड" लिंक पर क्लिक करता है, तो मैं वर्तमान जीयूआई को हटा देना चाहता हूं, और डैशबोर्ड को फिर से जोड़ा जाना चाहिए।

चूंकि यह कुछ हद तक बड़ा एप्लीकेशन होगा, मुझे यकीन नहीं है कि यदि दृश्य पैरामीटर को टॉगल करना पर्याप्त है, या उपयोगकर्ता के ब्राउज़र को अधिभारित करने के लिए अन्य उपायों को लेने की आवश्यकता नहीं है।

क्या कोई मार्गदर्शिका है, या एक उदाहरण है जो यह दिखाता है कि यह कैसे करें?

Answer 1

चेतावनी: पुरानी उत्तर

एक दृश्य Ember.View जो कुछ प्रमुख तरीकों हो जाता है इसका मतलब से विरासत। append(), जो body, appendTo(arg) में शामिल है जो एक तर्क और remove() लेता है।

तर्क डीओएम में तत्व डालने के लिए एक jQuery शैली चयनकर्ता है।

// my view 
App.PartsView = Ember.View.extend({ 
    ... 
}); 


// create/insert my view 
App.partsView = App.PartsView.create(); 
App.partsView.appendTo('#partcontainer'); 

मेरे कोड में मेरे पास <div id="partcontainer"></div> है।

// remove from DOM 
App.partsView.remove(); 

प्रलेखन Building a View Hierarchy पर एक अच्छा हिस्सा है और आप इसे सभी प्रोग्राम के या नहीं करना चाहते हैं, इस आधार पर Ember.ContainerView पर बाद में एक वर्ग है।