Ember Latest

The latest build of Ember.

by mavilein

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
    <div id="content">
        {{outlet docOutlet}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  <ul>
  {{#each item in content}}
       <li {{action transitionToDoc item}}>show {{item}}</li>
  {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="docTemplate1">
    docTemplate1
</script>

<script type="text/x-handlebars" data-template-name="docTemplate2">
    docTemplate2
</script>

CSS

ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});

App.Router.map(function(){
    this.route("doc", {path: '/docs/:doc'});
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
      controller.set('content', ['docTemplate1', 'docTemplate2']);
  },
  events : {
      transitionToDoc : function(item){
          this.transitionTo("doc",item);
      }
  }
        
});

App.DocRoute = Ember.Route.extend({
    model : function(params){
        return params.doc;
    },
    renderTemplate : function(){
        this.render({
            outlet :"docOutlet"
        });
    }
});


App.DocView = Ember.View.extend({
    render : function(buffer){
        var context = this.get("context.content");
        this.set("templateName", context);
        this._super(buffer);
    }
});