Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  
</head>
<body>
  
  <script type="text/x-handlebars" id="application">
   <ul>
    {{#each}}
      <li>
        {{#linkTo 'item' this}}
          {{title}}
        {{/linkTo}}
       </li>
    {{/each}}
  </ul>
  
  {{outlet}}
  
  </script>
  
  <script type="text/x-handlebars" id="index">
    <h1>INDEX</h1>
   {{outlet}}
  </script>
  
  <script type="text/x-handlebars" id="item">
    <h2>Item</h2>
    {{title}}<br/>
    {{viewTitle}}
    {{view "customItem" modelBinding=model}}
  </script>
  
  <script type="text/x-handlebars" id="components/item-apple">
    HERE
    <h3>{{model.title}}</h3>
    <h4>{{media.id}}</h4}
  </script>
  
  <script type="text/x-handlebars" id="components/item-banana">
    <h3>{{media.title}}</h3>
    <h4>{{media.id}}</h4}
  </script>
  
  <script type="text/x-handlebars" id="components/item-grape">
    <h3>{{media.title}}</h3>
    <h4>{{media.id}}</h4}
  </script>
  
</body>
</html>
 
App = Ember.Application.create();
​
App.Router.map( function(){
  this.resource("items", function(){
    this.resource("item", {path:':item_id'});
  });
});
​
App.ApplicationRoute = Ember.Route.extend({
  model:function(){
    return App.ITEM_FIXTURES;
  }
});
​
App.ITEM_FIXTURES = [
      {
        id:1,
        title: "First - Apple",
        viewTitle:"apple"
      },
      {
        id:2,
        title: "Second - Apple",
        viewTitle:"apple"
      },
      {
        id:3,
        title: "Third - banana",
        viewTitle:"banana"
      },
      {
        id:4,
        title: "Second - banana",
        viewTitle:"banana"
      },
      {
        id:5,
        title: "Third - grape",
        viewTitle:"grape"
      }
    ];
​
App.ItemRoute = Ember.Route.extend({
  model: function(params){
    return App.ITEM_FIXTURES.findProperty('id',params.item_id);
  }
});
​
App.ItemView = Ember.View.extend({
  templateName: 'item'
});
​
App.CustomItemView = Ember.ContainerView.extend({
    init: function(){
        this._super();
        
        var media = this.get('model');
      
        var viewClass = this.container.lookupFactory("component:item-" + media.viewTitle);
      
        var view = this.createChildView( viewClass, {
            media: media
        });
      
        
        this.pushObject(view);
        //this.set('currentView', view);
    },
  
  viewChanged:function(){
    console.log("HERE");
  }.observes('model.@each')
});
​
App.CustomItemController = Ember.Controller.extend();
​
App.ItemAppleComponent = Ember.Component.extend();
App.ItemBananaComponent = Ember.Component.extend();
App.ItemGrapeComponent = Ember.Component.extend();
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alex.daquinopro
0viewers