CODEWITHSUNDEEP
javascriptember.js
jumper rbk
jumper rbk

Reputation: 416

Ember route and link structure

I'm just starting to learn ember. Currently still trying to learn route and url. Need to know the better way to do this because in my template in the index.html there is repetition of code in each of the handlebar templates to manage the menu.

apps.js

App = Ember.Application.create();

App.Router.map(function() {
   this.resource('home', { path: '/' });
   this.resource('students');
   this.resource('about');
});

index.html

<script type="text/x-handlebars" id="home">
  <b>HOME</b>
  {{#link-to 'students'}}Students{{/link-to}}
  {{#link-to 'about'}}About{{/link-to}}

  <h1>Welcome to my Ember Web App</h1>
</script>

<script type="text/x-handlebars" id="students">
  {{#link-to 'home'}}HOME{{/link-to}}
  <b>Students</b>
  {{#link-to 'about'}}About{{/link-to}}

  <h1>Students List</h1>
</script>

<script type="text/x-handlebars" id="about">
  {{#link-to 'home'}}HOME{{/link-to}}
  {{#link-to 'students'}}Students{{/link-to}}
  <b>About{</b>

  <h1>About this web app</h1>
</script>

enter image description here

Thanks in advance for any help.

Upvotes: 0

Views: 58

Answers (1)

rob
rob

Reputation: 3012

You should make use of the application template to have things like a header and a footer, etc. There is a good description in the documentation.

So, you need a template which looks something like this:

<script type="text/x-handlebars">
    {{#link-to 'index'}} HOME {{/link-to}}
    {{#link-to 'students'}}Students{{/link-to}}
    {{#link-to 'about'}}About{{/link-to}}
    <div>
    {{outlet}}
    </div>
</script>

With this, your templates for the specific routes become significantly smaller because they get rendered to where you placed the {{outlet}} expression in the application template.

<script type="text/x-handlebars" id="students"> 
  <h1>Students List</h1>
</script>

Upvotes: 2

Related Questions