एम्बर राउटर v2 के साथ मोडल राज्यों में प्रवेश करने और बाहर निकलने का सही तरीका क्या है?

Question

मैं नए एम्बर राउटर के साथ मोडल राज्यों/विचारों को संभालने का सही तरीका नहीं समझ सकता। अधिक आम तौर पर, आप राज्यों को कैसे संभालेंगे कि आप "मुख्य" स्थिति (यूआरएल) को प्रभावित किए बिना प्रवेश और बाहर निकल सकते हैं?

उदाहरण के लिए, वर्तमान पत्ते की स्थिति के बावजूद उपलब्ध "नया संदेश" बटन है। "नया संदेश" पर क्लिक करने से यूआरएल को प्रभावित किए बिना, मौजूदा दृश्य पर नया संदेश मोडल खोलना चाहिए।

वर्तमान में, मैं इस तरह एक दृष्टिकोण का उपयोग कर रहा:

मार्गों:

App.Router.map(function() { 
    this.route('inbox'); 
    this.route('archive'); 
}); 

App.IndexRoute = Em.Route.extend({ 
    ... 
    events: { 
    newMessage: function() { 
     this.render('new_message', { into: 'application', outlet: 'modalView' }); 
    }, 

    // Clicking 'Save' or 'Cancel' in the new message modal triggers this event to remove the view: 
    hideModal: function() { 
     // BAD - using private API 
     this.router._lookupActiveView('application').disconnectOutlet('modalView'); 
    } 
    } 
}); 

App.InboxRoute = Em.Route.extend({ 
    ... 
    renderTemplate: function(controller, model) { 
    // BAD - need to specify the application template, instead of using default implementation 
    this.render('inbox', { into: 'application' }); 
    } 
}); 

App.ArchiveRoute = ... // basically the same as InboxRoute 

application.handlebars:

<button {{action newMessage}}>New Message</button> 
{{outlet}} 
{{outlet modalView}} 

मैं स्पष्ट रूप से संक्षिप्तता के लिए कुछ कोड बाहर छोड़ दिया गया है।

यह दृष्टिकोण 'काम करता है' लेकिन दोनों समस्याओं से ऊपर की पहचान की है:

1. मैं hideModal ईवेंट हैंडलर में मोडल दृश्य को दूर करने के लिए एक निजी एपीआई का उपयोग कर रहा हूँ।
2. मुझे अपने सभी सब्रॉउट्स में application टेम्पलेट निर्दिष्ट करने की आवश्यकता है, क्योंकि यदि नहीं, तो renderTemplate का डिफ़ॉल्ट कार्यान्वयन मोडल के टेम्पलेट में प्रस्तुत करने का प्रयास करेगा यदि आप मोडल खोलते हैं, इसे बंद करते हैं, और फिर इनबॉक्स और संग्रह राज्यों के बीच नेविगेट करें (क्योंकि मॉडेल का टेम्पलेट इंडेक्स रूट के लिए lastRenderedTemplate बन गया है)।

जाहिर है, इनमें से कोई भी समस्या डीलब्रेकर्स नहीं है, लेकिन यह जानना अच्छा होगा कि कोई बेहतर दृष्टिकोण है जो मुझे याद आ रहा है या यदि यह वर्तमान राउटर एपीआई में एक अंतर है।

Answer 1

हम एक ही चीज़ करते हैं लेकिन निजी एपीआई तक पहुंच के बिना। मुझे नहीं पता कि हमारा समाधान सबसे अच्छा अभ्यास है, लेकिन यह काम करता है।

हमारे RootRoute की घटनाओं में मेरे पास एक ईवेंट (आपके newMessage के समान) है, जहां हम उस दृश्य को बनाते हैं जिसे हमें प्रस्तुत करने की आवश्यकता होती है, और उसके बाद इसे जोड़ना होता है।

events: { 
    showNewSomething: function(){ 
     var newSomethingView = app.NewSomethingView.create({ 
      controller: this.controllerFor('newSomething') 
     }); 
     newSomethingView.append(); 
    } 
} 

यह हमारे ऐप में मोडल व्यू को जोड़ता है। newSomethingView में रद्द या सहेजने पर हम दृश्य को नष्ट करने और इसे फिर से ऐप से हटाने के लिए this.remove() पर कॉल करते हैं।

फिर से, यह एक सर्वोत्तम अभ्यास की तरह महसूस नहीं करता है, लेकिन यह काम करता है। अगर किसी के पास बेहतर समाधान है तो इस पर टिप्पणी करने के लिए स्वतंत्र महसूस करें।

Answer 2

पता नहीं है कि आप बूटस्ट्रैप मॉडल स्क्रिप्ट का उपयोग कर रहे हैं या कौन सा है, लेकिन यदि आप हैं, तो इस प्रश्न का एक प्रस्तावित समाधान है। मैंने अभी तक सभी टुकड़ों को नहीं पाया है, लेकिन एक समान प्रकार के समाधान की तलाश कर रहा हूं, जो कि "एम्बर सर्वोत्तम प्रथाओं" - सरल तरीके से Colorbox का उपयोग करने में सक्षम है।