Ember.js कई नाम आउटलेट उपयोग

Question

मैं एक आवेदन पत्र है, जो तीन भागों में आयोजित एक दृश्य परत होगा:

1. साइडबार
2. टूलबार-बाएँ
3. टूलबार-सही

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

Thx आगे।

Answer 1

अद्यतन: एम्बर एपीआई परिवर्तनों के कारण यह कोड पुराना है।

मैं एक बिंदु पर पहुंच गया हूं, जहां मैं कह सकता हूं कि मुझे वह समाधान मिला जो मेरे लिए सबसे अच्छा है।

<script type="text/x-handlebars" data-template-name="application"> 
<div class="container"> 
    <div class="toolbar">{{outlet toolbar}}</div> 
    <div class="main">{{outlet dashboard}}</div> 
    <div class="sidebar">{{outlet sidebar}}</div> 
</div> 
</script> 

इस तरह के एक आवेदन टेम्पलेट का उपयोग करना, मैं जहां विचारों प्रस्तुत करने के लिए चुन सकते हैं। इस तरह:

App.router = Ember.Router.create({ 
    enableLogging: true, 
    location: 'history', 
    root: Ember.Route.extend({ 
     index: Ember.Route.extend({ 
      route: '/admin/', 
      redirectsTo: 'login' 
     }), 
     login: Ember.Route.extend({ 
      route: '/admin/login/', 
      doLogin: function(router, context) { 
       "use strict"; 
       router.transitionTo('dashboard', context); 
      }, 
      connectOutlets: function (router, context) { 
       "use strict"; 
       router.get('applicationController').connectOutlet('login', "login"); 
      } 
     }), 
     dashboard: Ember.Route.extend({ 
      route: '/admin/dashboard/', 
      doLogout: function(router, context) { 
       "use strict"; 
       router.transitionTo('login', context); 
      }, 
      connectOutlets: function (router, context) { 
       "use strict"; 
       router.get('applicationController').connectOutlet('sidebar', 'sidebar'); 
       router.get('applicationController').connectOutlet('toolbar', 'toolbar'); 
       router.get('applicationController').connectOutlet('dashboard', 'dashboard'); 
      } 
     }) 
    }) 
}); 

मेरे पास तीन विचार हैं, जो समाधान बिंदु से महत्वपूर्ण नहीं हैं, जो उनके आउटलेट में प्रदान किए जाते हैं।

आशा है कि इससे दूसरों की मदद मिलेगी।

Answer 2

अपने आवेदन टेम्पलेट में, आपको नामित आउटलेट {{outlet sidebar}} के रूप में घोषित करने की आवश्यकता होगी। इसी प्रकार आपके द्वारा उल्लिखित टूलबार के लिए।

संपादित करें: शेष पुराना है। @dineth के रूप में, Rendering a Template देखें।

फिर अपने मार्ग में (मान लीजिए कि App.NavigationView क्या तुम वहाँ रहना चाहते हैं):

App.Router = Em.Router.extend({  
    root: Em.Route.extend({ 
     index: Em.Route.extend({ 
      route: '/', 
      connectOutlets: function(router) { 
       router.get('applicationController').connectOutlet('sidebar', 'navigation'); 
      } 
     }) 
    }) 
}); 

साइडबार उदाहरण: http://jsfiddle.net/q3snW/7/

संदर्भ this documentation{{outlet}} सहायक पर, और .connectOutlet कॉलबैक पर this documentation ।

Answer 3

नई रूटर आप कुछ इस तरह कर सकते हैं के साथ

:

// application route 
Ember.Route.extend({ 
    renderTemplate: function() { 
     // Render default outlet 
     this.render(); 
     // render extra outlets 
     this.render("menu", { 
      outlet: "menu", 
      into: "application" // important when using at root level 
     }); 
    } 
}); 

आप हालांकि एक menu -template होना चाहिए:

{{outlet "menu"}} 
{{outlet}} 

अपने मार्ग में आप दुकानों की सामग्री संभाल सकते हैं।

आप इसके बारे में अधिक जानकारी here पढ़ सकते हैं।