在emberjs中渲染模板后如何使事情发生

Question

So the concept is simple: You come to the app, you have a default template, with a default navigation element. You click a link in that navigation element it renders a new template: #/rails .

From here the default navigation needs to be hidden, and your new nav needs to be rendered.

The way i attempted to approach this, seems a bit silly: what I did was,

SG.Router.map(function(){
  this.resource('rails');
});

$(document).ready(function() {
  if($('#rails-nav').length !== 0){
    $('#main-nav').hide();
  }
});

Now the issue with this is that if you go from the default application template, to the rails template via the link - you get two navs unless you refresh that page. My friend stated that I should use something like:

{{outlet nav}} and then render a navigation based on template. The issue is I don't know how to set this up and I have been looking all over the ember site.

Could some one help me out?

Answer 1

If i understood correctly, when you say default template you mean the application template, where all other templates are rendered within its {{outlet}} helper.

There are several approaches to achieve what you want, but a simple one i think would be to use the index template as your default template. In this case evertyhting will be much simpler and work as you require, since you can specify whether the navigation element is shown by placing it inside a template or not.

http://emberjs.jsbin.com/sume/1/edit

hbs

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    This is the default template using <i>index</i>
    <br/>
    <br/>
    <span style="background-color:grey">this is the nav part {{#link-to 'rails'}}go to rails{{/link-to}}</span>
  </script>

  <script type="text/x-handlebars" data-template-name="rails">
    this is the rails app
  </script>

js

App = Ember.Application.create();

App.Router.map(function() {
  this.resource("rails");
});

Also to make this answer a bit more relevant to the title of the question, in order to do something when a template has rendered one way would be to use the didInsertElement callback of the View class.

App.RailsView = Ember.View.extend({
  didInsertElement:function(){
    if($('#rails-nav').length !== 0){
      $('#main-nav').hide();
    }
  }
});

http://emberjs.jsbin.com/dido/1/edit