Ember.js - CRUD परिदृश्यों - एक मार्ग के भीतर से देखें निर्दिष्ट

Question

मैं एक सवाल है, जिसमें पहले से मैं bind a collection residing in the controller to the list scenario view करना चाहता था, फिर भी, मैं विवरण और संपादित टेम्पलेट्स और मेरी संरचना का निर्माण करने के लिए विचारों को जोड़ दिया है पूछा है अतिरिक्त उप मार्गों के एक जोड़े:

root.contacts.details -> /contacts/:contact_id
root.contacts.edit -> /contacts/:contact_id/edit

मेरी details स्थितियों में मैं पहली बार के रूप में

इस प्रकार connectOutlets कहना शुरू कर दिया

[...] 
connectOutlets: function (router, contact) { 
    router.get('contactController').set('contact', contact); 
    router.get('applicationController').connectOutlet('contacts'); 
},[...] 

यह ब्राउज़र नेविगेशन बार में मार्ग बदल जाएगा, लेकिन यह एक ही दृश्य लोड होता, तो मैं .connectOutletको संपर्क बजाय संपर्क निम्नलिखित

[...] 
connectOutlets: function (router, contact) { 
    router.get('contactController').set('contact', contact); 
    router.get('applicationController').connectOutlet('contact'); 
},[...] 

करने के लिए बदल इस वजह से, मुझे एक नया नियंत्रक बनाना पड़ा क्योंकि एम्बर को contactController नामक नियंत्रक नहीं मिला, इसलिए मैंने contactController और contactsController के साथ समाप्त किया और मुझे लगता है कि मैं इसे करने वाले एमवीसी पैटर्न को तोड़ रहा हूं, अच्छी तरह से बनाए रखने के लिए एक अतिरिक्त कक्षा बनाने के रूप में, सिंक्रनाइज़ेशन के साथ संभावित समस्याएं (जब एक संपर्क संपादित करते हैं तो मुझे contactsController में संग्रह के साथ मैन्युअल रूप से सिंक करना होगा)। साथ ही जब मैं /#/contacts/2/edit पर नेविगेट करता हूं तो यह विवरण दृश्य लोड करता है क्योंकि मैं .connectOutlet('contact') में एक ही नाम का उपयोग कर रहा हूं। तो मैं जो कर रहा हूं वह सही नहीं हो सकता है। मैं प्रति परिदृश्य नियंत्रक बनाना नहीं चाहता। मुझे यकीन है कि यह नहीं किया गया है कि यह कैसे किया जाता है।

मैं भी दृश्य संसाधन नाम के बजाय connectOutlets में स्थापित करने (मेरे मामले App.EditContactView में) की कोशिश की लेकिन मैं एक त्रुटि कह मैं पारित कर सकते हैं "एक नाम या एक viewClass लेकिन दोनों" मिल गया, लेकिन मैं गुजर नहीं किया गया था viewClass के माध्यम से और connectOutlet के तर्क के रूप में।

मैंने मार्ग पर अपने विचार का एक दृश्य या उदाहरण सेट करने का भी प्रयास किया है और मैं या तो अपनी जावास्क्रिप्ट तोड़ दूंगा या कुछ मामलों में मुझे यह कहने में त्रुटि होगी कि "App.EditContactView में कोई नहीं है विधि CharAt "।

फिर फिर, मुझे थोड़ा खो गया। मैंने एसओ पर अन्य प्रश्नों को देखा है और अन्यथा जहां मुझे मिला है, वे या तो गॉर्डन हैप्टन द्वारा का उपयोग कर रहे थे (जो अच्छा लगता है, लेकिन मुझे अभी अंतर्निहित उपयोग करने में दिलचस्पी है), Ember.StateManager या राज्य/बिल्कुल मार्ग दस्तावेज़ीकरण अभी तक इन चीजों के बारे में बहुत कुछ नहीं समझा रहा है।

प्रश्न: Ember.Router के साथ सभी सीआरयूडी परिदृश्यों से निपटने के लिए आदर्श दृष्टिकोण क्या होगा? मैं अपने contactsController को सभी सूचीबद्ध करने में सक्षम होने के लिए चाहता हूं, एक ढूंढें, एक संपादित करें, एक जोड़ें और एक संपर्क हटाएं। अभी मेरे पास findAll और , edit, remove, add समस्याओं का नामकरण करने के कारण है।

मैं वर्तमान में एम्बर-डेटा का उपयोग नहीं कर रहा हूं, इसलिए मैं एम्बर-डेटा के संदर्भ के बिना उदाहरणों में अधिक रुचि रखूंगा (मैं अब के लिए किसी भी प्लग-इन के बिना बच्चे के कदम कर रहा हूं)।

यहाँ मेरी रूटर के वर्तमान संस्करण है:

जे एस

App.Router = Ember.Router.extend({ 
    enableLogging: true, 
    location: 'hash', 

    root: Ember.Route.extend({ 
     // EVENTS 
     gotoHome: Ember.Route.transitionTo('home'), 
     gotoContacts: Ember.Route.transitionTo('contacts.index'), 

     // STATES 
     home: Ember.Route.extend({ 
      route: '/', 
      connectOutlets: function (router, context) { 
       router.get('applicationController').connectOutlet('home'); 
      } 
     }), 
     contacts: Ember.Route.extend({ 
      route: '/contacts', 
      index: Ember.Route.extend({ 
       route: '/', 
       contactDetails: function (router, context) { 
        var contact = context.context; 
        router.transitionTo('details', contact); 
       }, 
       contactEdit: function (router, context) { 
        var contact = context.context; 
        router.transitionTo('edit', contact); 
       }, 
       connectOutlets: function (router, context) { 
        router.get('contactsController').findAll(); 
        router.get('applicationController').connectOutlet('contacts', router.get('contactsController').content); 
       } 
      }), 
      details: Ember.Route.extend({ 
       route: '/:contact_id', 
       view: App.ContactView, 
       connectOutlets: function (router, contact) { 
        router.get('contactController').set('contact', contact); 
        router.get('applicationController').connectOutlet('contact'); 
       }, 
       serialize: function (router, contact) { 
        return { "contact_id": contact.get('id') } 
       }, 
       deserialize: function (router, params) { 
        return router.get('contactController').find(params["contact_id"]); 
       } 
      }), 
      edit: Ember.Route.extend({ 
       route: '/:contact_id/edit', 
       viewClass: App.EditContactView, 
       connectOutlets: function (router, contact) { 
        router.get('contactController').set('contact', contact); 
        router.get('applicationController').connectOutlet('contact'); 
       }, 
       serialize: function (router, contact) { 
        return { "contact_id": contact.get('id') } 
       }, 
       deserialize: function (router, params) { 
        return router.get('contactController').find(params["contact_id"]); 
       } 
      }) 
     }) 
    }) 
}); 
App.initialize(); 

प्रासंगिक टेम्पलेट्स

<script type="text/x-handlebars" data-template-name="contact-details"> 
    {{#if controller.isLoaded}} 
     <img {{bindAttr src="contact.imageUrl" alt="contact.fullName" title="contact.fullName"}} width="210" height="240" /><br /> 
     <strong>{{contact.fullName}}</strong><br /> 
     <strong>{{contact.alias}}</strong> 
    {{else}} 
     <img src="images/l.gif" alt="" /> Loading... 
    {{/if}} 
</script> 

<script type="text/x-handlebars" data-template-name="contact-edit"> 
    <strong>Edit contact</strong><br /> 
    First Name: <input type="text" id="txtFirstName" {{bindAttr value="contact.firstName"}}<br /> 
    Lasst Name: <input type="text" id="txtLastName" {{bindAttr value="contact.lastName"}}<br /> 
    Email: <input type="text" id="txtEmail" {{bindAttr value="contact.email"}}<br /> 
</script> 

<script type="text/x-handlebars" data-template-name="contact-table-row"> 
    <tr> 
     <td> 
      <img {{bindAttr src="contact.imageUrl" alt="contact.fullName" title="contact.fullName"}} width="50" height="50" /><br />{{contact.fullName}} 
     </td> 
     <td> 
      Twitter: {{#if contact.twitter}}<a {{bindAttr href="contact.twitter"}} target='_blank'>Follow on Twitter</a>{{else}}-{{/if}}<br /> 
     </td> 
     <td> 
      <a href="#" {{action contactDetails context="contact"}}>Details</a> | 
      <a href="#" {{action contactEdit context="contact"}}>Edit</a> 
     </td> 
    </tr> 
</script> 

नोट: वहाँ कुछ भी स्पष्ट नहीं है, तो में कहें टिप्पणी अनुभाग और मैं ई कर सकते हैं DIT अधिक जानकारी के

संपादित के साथ इस: मैं GitHub को यह परियोजना भी यद्यपि यह मैं एक सीखने नमूना के रूप में बेनकाब करने के लिए चाहते हैं, उसके पास कहीं भी नहीं है जोड़ दिया है। लक्ष्य इसके शीर्ष पर प्रगति करना और निकट भविष्य में एक सीआरयूडी टेम्पलेट बनाना है। वर्तमान में एमएस वेब एपीआई का उपयोग कर, लेकिन जल्द ही एक रेल संस्करण जोड़ सकते हैं।

Answer 1

यहां कुछ चीजें चल रही हैं, मैं कोशिश करूँगा और उनका जवाब दूंगा, लेकिन अगर मुझे कुछ याद आती है तो कोई टिप्पणी छोड़ने के लिए स्वतंत्र महसूस होता है। ऐसा लगता है कि एम्बर पहले से ही आपके लिए बहुत सी चीजें पुनर्निर्मित कर रहा है।

सबसे पहले, यदि आप connectOutlet विधि को देखने के लिए चाहते हैं तो आपको एक हैश में एक और एकमात्र तर्क के रूप में पास करने की आवश्यकता है।

router.get('applicationController').connectOutlet({ 
    viewClass: App.EditContactView, 
    controller: router.get('contactsController'), 
    context: context 
}) 

दूसरा, दो संपर्क नियंत्रक होने पर फंसे नहीं हैं, असल में मैं इसकी अनुशंसा करता हूं। एक विलक्षण ContactController कि ObjectController और एक ContactsController कि ArrayController से विरासत से विरासत, यह आप आसानी से सामग्री में बनाया प्रॉक्सी का लाभ ले सकते है।

तीसरा, अगर आप अपने मॉडल आप जीवन कर देगा करने के लिए find और findAll वर्ग तरीके जोड़ अपने लिए बहुत आसान है।

• आप नाम मार्ग तो से निष्कर्ष निकाला के साथ एक मॉडल के लिए दिखाई देगा, serialize/deserialize तरीकों आप को परिभाषित किया है परिभाषित करने के लिए डिफ़ॉल्ट एंबर द्वारा की जरूरत नहीं होगी: contact_id स्वचालित रूप से App.Contact.find के लिए दिखेगा (: contact_id)।

• तुम भी करने के लिए अपने सूचकांक connectOutlets को बदलने में सक्षम हो जाएगा: router.get('applicationController').connectOutlet('contacts', App.Contact.findAll())

एक और टिप, वर्तमान में आपके विवरण और मार्गों संपादित लगभग पूरी तरह से समान हैं। मैं company नामक एक एकल मार्ग बनाउंगा और उसके बाद बच्चे के विवरण और इसके अंदर के विचारों को संपादित करूँगा।