yeni ember.js yönlendirme: çıkışlar nasıl bağlanır?

Question

Yeni yönlendirici yaklaşımıyla çıkışların nasıl bağlanacağı konusunda kafam karıştı.

index.html:

... 
<script type="text/x-handlebars" data-template-name="application"> 
    <h4>The application handelbar</h4> 
    {{! outlet 1}} 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    <h4>The index handelbar</h4> 
    {{! outlet 2 and 3}} 
    {{outlet nav}} 
    {{outlet main}} 
</script> 

<script type="text/x-handlebars" data-template-name="main"> 
    <h4>The main handelbar</h4> 
</script> 

<script type="text/x-handlebars" data-template-name="nav"> 
    <h4>The nav handelbar</h4> 
</script> 
... 

app.js:

... 
App.Router.map(function(match) { 
    this.resource("index", { path: "/" }); 
    this.route("test"); 
}); 

App.IndexController = Ember.Controller.extend({ 
}); 

App.IndexView = Ember.View.extend({ 
    templateName: 'index' 
}); 
... 

Bu kod, çıkış 1 vermektedir.

Sorular:

• Neden çıkış-1 oluşturulur? Outlet-1 ve "index" nasıl bağlanır?
• 2 ve 3 numaralı çıkışları aynı "dizin" sitesine nasıl bağlarım?

Teşekkür MIW

Answer 1

Sen renderTemplate yöntemini (veya renderTemplates yöntemi, Yapınızda bağlı olarak) kullanılarak, bir rota işleyicisi içinde bu şeyleri belirtmek gerekir.

Görmediğiniz şey, Ember'in zaten sizin için birkaç varsayılan değeri ayarlamasıdır. Aslında, Ember tarafından ayarlanan varsayılanlar, tüm yol işleyicisini çıkarmanıza izin verdi. Bu yardımcı olur

renderTemplate: function() { 
    this.render("index"); 
    // this renders the index template into the primary unnamed outlet. 
    this.render("navtemplate", {outlet: "nav"}); 
    // this renders the navtemplate into the outlet named 'nav'. 
    this.render("main", {outlet: "main"}); 
    // this renders the main template into the outlet named 'main'. 
    } 

Hope: Ne istiyorsun

App.Router.map(function(match) { 
    this.resource("index", { path: "/" }); 
    this.route("test"); 
}); 
App.IndexRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render(); 
    /* this is the default, it will basically render the 
     default template, in this case 'index', into the 
     application template, into the main outlet (i.e. your 
     outlet 1), and set the controller to be IndexController. 
    */ 

    } 
}); 

likeso, renderTemplate fonksiyonunda Ek şablonlar kılmaktır. Ember, IndexRoute, IndexController ve IndexView ile otomatik olarak eşleşir/eşleşir.

Answer 2

App.OtherRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render('otherTemplate', { 
     into: 'index', 
     outlet: 'nav' 
    }); 
    } 
}); 

Here başka bir soru gelen derinlik yanıtında bir fazlasıdır: Bu böyle yapabilirsin iç içe yolları bağlamak için ember routing guide

içindedir.