एम्बरजे हैंडलबार # गणना सहायक गुणों के लिए बाध्य होने पर प्रत्येक सहायक धीमी गति

Question

जब मैं # एच हेल्पर या एम्बर.एरे कंट्रोलर के कुछ गणना गुणों के लिए संग्रहित संग्रह दृश्य का उपयोग करके आइटम की एक सूची प्रस्तुत करता हूं तो मैं एक प्रदर्शन समस्या में भाग ले रहा हूं। प्रदर्शन 10 - 20 वस्तुओं की एक छोटी सूची के साथ ठीक है, लेकिन लगभग 50 - 100 यह काफी ध्यान से अंतराल शुरू होता है। कुछ सब बंद जाँच या "तोदो जोड़ें"

उदाहरण कोड यहाँ है क्लिक करने का प्रयास: http://jsfiddle.net/Jonesy/ed3ZS/4/

मैंने देखा है कि डोम में childViews प्रत्येक परिवर्तन है, जो बहुत अच्छी तरह से अभिप्रेत व्यवहार हो सकता है के साथ फिर से प्रदान की गई हो फिलहाल, लेकिन मैं अलग-अलग अधूरे टोडोस सूची के डीओएम से व्यक्तिगत रूप से एक टोडो को हटा सकता हूं और समाप्त टोडोस सूची के नीचे जोड़ सकता हूं, जो सिद्धांत रूप में बहुत कम महंगा होगा।

जो मैं उत्तर देने की उम्मीद कर रहा हूं वह यह है कि क्या मैं एम्बर संग्रह विचारों के साथ एक प्रदर्शन समस्या देख रहा हूं, या एक गणना की गई संपत्ति से एक सूची को खराब विचार दिखा रहा हूं, और यदि ऐसा है, तो मुझे मैन्युअल रूप से प्रबंधित करने की आवश्यकता होगी दृश्य परत में todo मॉडल का स्थान क्योंकि यह अधूरा से समाप्त और इसके विपरीत में बदल जाता है।

Answer 1

यह {{#each}} (और CollectionView, जो इसे शक्ति देता है) का दुष्प्रभाव है।

आंतरिक रूप से, CollectionViewसरणी पर्यवेक्षक नामक कुछ का उपयोग करता है। एक सरणी पर्यवेक्षक आपको Ember.Array के उत्परिवर्तन विधियों (replace, pushObject, popObject, आदि का उपयोग करके किए गए उत्परिवर्तनों की सदस्यता लेने की अनुमति देता है) सरणी पर्यवेक्षकों is described here के लिए API।

इसका अर्थ यह है कि, यदि आप संग्रह वस्तु में एक नई वस्तु को दबाते हैं, तो यह डोम में एक नया तत्व प्रस्तुत करेगा और शेष को जगह में छोड़ देगा।

आपके द्वारा पोस्ट किए गए उदाहरण में, सरणी को उत्परिवर्तित नहीं किया जा रहा है - जब भी कोई नया आइटम जोड़ा या निकाला जाता है तो आप एक नया नया Array ऑब्जेक्ट बना रहे हैं। जब बाध्यकारी सिंक्रनाइज़ करता है, तो नई सरणी के साथ पुरानी सरणी को प्रतिस्थापित करता है। {{#each}} पर, यह सभी तत्वों को हटाने और फिर उन्हें वापस जोड़ने से अलग नहीं है।

समस्या का समाधान एक गणना की गई संपत्ति के बजाय एक एकल सरणी का उपयोग करना है जो हर बार एक अलग सरणी वस्तु देता है परिवर्तन। आप the Contacts app for an example of how to do this देख सकते हैं।

जाहिर है यह एक बहुत ही आम पैटर्न है, और हम कुछ प्रकार के फ़िल्टरिंग को जोड़ना चाहते हैं जो डिफ़ॉल्ट रूप से सही जगह पर Ember.ArrayController तक सड़क पर है।