2011-12-21 27 views
26

का बैकबोन चेंज मॉडल मैं बैकबोन के लिए बिल्कुल नया हूं और निम्नलिखित प्रश्न है:व्यू

मेरे पास मॉडल का संग्रह है।

मेरे पास एक संग्रह दृश्य टैब है (संग्रह में प्रत्येक मॉडल के लिए एक दृश्य के साथ)।

मेरे पास एक मॉडल (सामग्री के लिए) के लिए एक दृश्य है।

मेरे पास मार्गों के साथ राउटर है।

क्या मैं प्राप्त करने के लिए कोशिश कर रहा हूँ है की तरह http://jqueryui.com/demos/tabs/

मैं एक टैब (संग्रह के मॉडल) पर क्लिक करें और फिर शायद सामग्री को देखने के लिए मॉडल पारित इसे बदलने और संग्रह में बदलाव को प्रतिबिंबित करना चाहते हैं एक कार्यक्षमता ।

रूटर में:

मैं चार समाधान के साथ आया था

'switchCommunity': function(id) { 
     // (a) set new model attributes 
     this.view.community.model.set(communities.get(id)); 

     // (b) replace model 
     this.view.community.model = communities.get(id); 

     // (c) a custom function of the view changes its model 
     this.view.community.changeModel(communities.get(id)); 

     // (d) a new view 
     this.view.community = new View({ 
      model: communities.get(id) 
     }) 
} 

समस्या यहाँ है

  • (क) में मॉडल में परिवर्तन को प्रतिबिंबित नहीं करता संग्रह

  • (बी) ट्रिगर नहीं करता है (बदलें) घटनाओं, क्योंकि देखने के इनिशियलाइज़ समारोह में बाँध कभी नहीं चलाता है, क्योंकि यह एक पूरी तरह से नए मॉडल है

  • (ग) मेरे लिए एक हैक की तरह लगता है

  • (घ) हर मैं पर क्लिक करें एक टैब कोई नया दृश्य बन जाता है (यह एक प्रदर्शन मुद्दा है?)

क्या सबसे अच्छा अभ्यास यहाँ है?

+2

मैं कोशिश करता हूं (डी) - यदि आप पहले पुराने दृश्य को हटाते हैं तो यह प्रदर्शन समस्या नहीं बनता है। – swatkins

+0

में (डी) मैं अपना यह ओवरराइट करता हूं .view.com मुक्ति यह पर्याप्त है या क्या मुझे इसे मैन्युअल रूप से निकालना है? – Riebel

+1

यह पर्याप्त होना चाहिए, जब तक कि पुराने डोम तत्व चारों ओर लटकते नहीं हैं और घटना श्रोताओं को उनके पास बाध्य किया जाता है, उन्हें कचरा इकट्ठा किया जाना चाहिए। मैं फायरबग के साथ सत्यापित करूंगा, लेकिन मुझे लगता है कि यह सही है। – swatkins

उत्तर

15

अपने समाधान में से एक ठीक हो जाएगा के करीब है: डी

यहाँ आप क्या चाहते है:

this.view.community.model.set(communities.get(id).toJSON()); 

और यह model.on ("परिवर्तन") के रूप में अच्छी तरह से ट्रिगर किया जाएगा।

+0

'समुदायों.get (आईडी) .attributes' भी काम करता है और मुझे क्लीनर दिखता है। –

1

Backbone.Marionette प्लगइन आपकी समस्या के लिए एक सुव्यवस्थित समाधान प्रदान करता है।

यह एप्लिकेशन प्रारंभ, दृश्य प्रबंधन और ईवेंट एकत्रीकरण के लिए कार्यक्षमता प्रदान करता है।

संक्षेप में, यह छिपाने और कई विचार दिखाने से दर्द होता है।

इसके बारे में अधिक जानने के लिए आप यह blog post पढ़ सकते हैं।

+0

बिल्कुल, लेकिन ध्यान रखें कि प्लगइन काफी नया है और बदल सकता है इतने दूर भविष्य में कुछ बार – Sander

8

आपको क्यों लगता है (सी) एक हैक है? यह पुराने मॉडल के असंतुलन को समाहित करने और नए को जोड़ने के लिए एक अच्छी जगह की तरह लगता है।

0

संक्षिप्त उत्तर आपको डी का उपयोग करना चाहिए।हां प्रदर्शन नहीं है लेकिन जब तक आप उपयोगकर्ता इंटरफ़ेस में मंदी नहीं देखते हैं तो आपको बहुत ज्यादा चिंता नहीं करनी चाहिए। आपको कुछ कोड करना चाहिए 1. हमेशा काम करता है 2. कोड में लंबा समय नहीं लगता है ताकि आप अन्य महत्वपूर्ण सुविधाओं को कोडिंग करने के लिए आगे बढ़ सकें।

यदि आपको अधिक प्रदर्शन की आवश्यकता है तो आप सी करने के लिए अतिरिक्त समय ले सकते हैं। सबसे अधिक प्रदर्शन करने के लिए आपको टेम्पलेट्स को नष्ट और पुन: प्रस्तुत नहीं करना चाहिए। आपको डीओएम पर तत्वों को मैन्युअल रूप से ढूंढने के लिए jquery का उपयोग करना चाहिए और उन्हें नए मॉडल के साथ प्रतिस्थापित करना चाहिए। जब आप फोन:

view.$el = _.template(string, model); 

यह बहुत कम कोड लेकिन ब्राउज़र के लिए काम करते के बहुत सारे है। एक नए मॉडल के साथ डीओएम को बदलना ज्यादा प्रदर्शनकारी है।

यदि आपको अधिक प्रदर्शन करने की आवश्यकता है तो आप ऑब्जेक्ट पूलिंग का उपयोग कर सकते हैं। मैं रीढ़ की हड्डी के लिए एक PerfView पर काम कर रहा हूं जो कई अनुकूलन लागू करता है। https://github.com/puppybits/BackboneJS-PerfView सर्वोत्तम ब्राउज़र प्रदर्शन को बनाए रखने के लिए बहुत अच्छे अभ्यासों के साथ कोड में टिप्पणियां हैं।