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-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<meta charset="utf-8">
<title>TaskLists</title>
</head>
<body>
  
  <script type="text/x-handlebars">
    <div>
    <h2>My Tasks</h2>
    {{#linkTo 'lists'}}lists{{/linkTo}}
    </div>
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="lists">
    <ul>
      {{#each}}
      <li>{{#linkTo 'list' this}}{{title}}{{/linkTo}}</li>
      {{/each}}
    </ul>
    <button {{action 'addList'}}>Add List</button>
  </script>
​
  <script type="text/x-handlebars" data-template-name="list">
     Displaying tasks from {{input type="text" placeholder="text" value=title}}
​
    {{render 'task' tasks}}
    <button {{action 'addTask'}}>Add Task</button>
​
  </script>
​
​
  <script type="text/x-handlebars" data-template-name="task">
    <ul>
      {{#each 'task' in controller itemController='item'}}
        {{#if this.isEditing}}
          <li>{{input type="text" placeholder="text" value=task.description}} <button {{action 'doneEditing' }}>Done</button></li> 
        {{else}}
          <li>{{task.description}}<button {{action 'edit' target="controller"}}>Edit</button><button {{ action 'remove' target="controller"}}>Remove</button></li>
          {{render 'comment' comment}} 
        {{/if}}
      {{/each}}
    </ul>
  </script>
​
  <script type="text/x-handlebars" data-template-name="comment">
    <ul>
      {{#each 'comment' in task.comments}}
       <li>{{comment.description}}</li>
      {{/each}}
    </ul>
    {{textarea valueBinding="descriptor"}}
    <button {{action addComment descriptor}}>Add Comment</button>
​
  </script>
​
​
​
​
​
</body>
</html>
​
 
App = Ember.Application.create();
​
App.Router.map(function() {
  this.resource('lists');
  this.resource('list', {path: ':list_id'});
​
});
​
App.IndexRoute = Ember.Route.extend({
  redirect : function(){
      this.transitionTo('lists');
  }
});
​
​
App.ApplicationRoute = Ember.Route.extend({
  setupController : function(){
    this.controllerFor('task').set('model' , this.store.find('task'));
  }
});
​
​
App.ListsRoute = Ember.Route.extend({
  model : function(){
    return this.store.find('list'); 
  }
});
​
App.ListRoute = Ember.Route.extend({
  model : function(params){
    return this.store.find('list', params.list_id);
  }
});
​
​
​
//===CONTROLLERS================================================================
​
App.ListsController = Ember.ArrayController.extend({
  actions : {
    addList : function(){
      var foo = this.store.createRecord('list', {
        title : 'Untitled',
        tasks : []
      });
      this.get('list').pushObject(foo);
      foo.save();
    }
  }
});
​
App.ListController = Ember.ObjectController.extend({
  actions:{
    
    addTask : function(){
      var foo = this.store.createRecord('task', { 
        description : '',
        list : this.get('content.id'),
        comments : []  
      });
      this.get('tasks').pushObject(foo);
      foo.save();
    }
  }
});
​
App.TaskController = Ember.ArrayController.extend({
  actions : {
   
  }
});
​
​
App.ItemController = Ember.ObjectController.extend({
  needs : ['task'],
  isEditing: false,
  actions : {
   addComment : function(descriptor){
        var foo = this.store.createRecord('comment', { 
        task : this.get('content.id'),
        description : descriptor
      });
      console.log(descriptor);
      this.get('comments').pushObject(foo);
      foo.save();
    },
    edit : function(){
      this.set('isEditing', true);
    },
    doneEditing : function(){
      this.set('isEditing', false);
    },
    remove : function(){
      task = this.get('model');
      task.deleteRecord();
      task.save();
      console.log('task Deleted!');
​
    }
  }
});
​
​
​
​
​
​
//===MODEL====================================================================
​
App.Store = DS.Store.extend({});
​
App.ApplicationAdapter = DS.FixtureAdapter;
​
App.List = DS.Model.extend({
  title: DS.attr('string'),
  tasks: DS.hasMany('task', {async : true})
});
​
App.Task = DS.Model.extend({
  list: DS.belongsTo('list'),
  description: DS.attr('string'),
  comments : DS.hasMany('comment', {async : true})
});
​
App.Comment = DS.Model.extend({
  task: DS.belongsTo('comment'),
  description: DS.attr('string')
});
​
​
​
//===FIXTURE DATA================================================================
App.List.FIXTURES = [{
  id:1,
  title:'My faves',
  tasks : [400, 401]
},{
  id:2,
  title: 'Errands',
  tasks : [402, 403, 404]
}];
​
App.Task.FIXTURES = [{
  id:400,
  list : 1,
  description : 'go to market',
  comments: [1000, 1001]
},{
  id:401,
  list : 1,
  description : 'go to store',
  comments: [1002, 1003]
},{
  id:402,
  list : 2,
  description : 'visit place',
  comments: [1004]
},{
  id:403,
  list : 2,
  description : 'eat a food',
  comments: [1005]
},{
  id:404,
  list : 2,
  description : 'run an errand'
}];
​
App.Comment.FIXTURES = [{
  id:1000,
  task : 400,
  description : 'hre is a comment'
},{
  id:1001,
  task : 400,
  description : 'sglakjdfl askdjfa'
},{
  id:1002,
  task : 401,
  description : 'hey man slkdfj oawiejf'
},{
  id:1003,
  task: 401,
  description : 'beyaoiuadjf'
},{
  id:1004,
  task : 402,
  description : 'riugalkdjf aodi'
},{
  id:1004,
  task : 403,
  description : 'last comment!'
}];
​
​
​
Output

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

Dismiss x
public
Bin info
edchaopro
0viewers