vendredi 14 avril 2017

Template inheritance in Ember

I have several unrelated pages that use Layout A, and another set of unrelated pages that use Layout B. It's as simple as that, but I can't figure out how to do this in Ember the DRY way.

I understand that template nesting is equal to route nesting, but I do not want to nest routes because it'd mean the URL will be also nested. I want to nest templates only because the pages are unrelated.

What I want to achieve is essentially template inheritance.

I expected this to work, but Ember throws an error.

// app/routes/samePage.js
import Ember from 'ember';

export default Ember.Route.extend({
    renderTemplate(){
        this.render('somePage', {
            into: 'layoutA'
        });
    }
});

This is the error I get:

ember.debug.js:18015 Assertion Failed: You attempted to render into 'layoutA' but it was not found

I also get this warning. It tells me to read this link, but I don't think it helps me.

DEPRECATION: Rendering into a helper that resolves to an is deprecated. [deprecation id: ember-routing.top-level-render-helper] See http://ift.tt/2oeByuM for more details.

Here is what layoutA.hbs would look like. I know you can't have multiple times in a same template, but you probably get what I want to achieve.

<div class="header">
    
</div>
<div class="content">
    
</div>
<div class="footer">
    
</div>

How do I go about doing this in Ember? It sounds like such a basic task that needs to be more clear. Do I need to implement a template inheritance helper (like the one shown here) by myself? Or perhaps, there's already an Ember add-on for that?




Aucun commentaire:

Enregistrer un commentaire