Ember Grid

by DiscoverSDK

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!doctype html>

  <body>
   

	<script type="text/x-handlebars" data-template-name="todos">
		<section id="todoapp">
			<fieldset>
			<h3>Add Resources</h3>
			<form>
				<span >Description:</span>
				{{input
				  type="text"
				  id="description"
				  value=description
				  style="width:180px;"}}
				<span > URL:</span>
				{{input
				  type="text"
				  id="url"
				  value=url
				  style="width:340px;"}}
				<button {{action "createTodo"}}>Add</button>
			</form>
			<a href="#" {{action "showResource"}}>Show</a>


			<h3>List of Resources</h3>
			<table border="1" style="width:740px;">
				<thead>
					<tr>
						<th><h4>Description</h4></th>
						<th><h4>URL</h4></th>
						<th></th>
					</tr>
				</thead>
				<tbody>
				{{#each todo in model itemController="todo"}}
					<tr>
						<td>
						{{input
						  type="text"
						  value=todo.ResourceDescription
						  style="width:100%"}}
						</td>
						<td>
						{{input
						  type="text"
						  value=todo.ResourceAddress
						  style="width:100%"}}
						</td>
						<td><button {{action "removeTodo" todo.id}}>Remove</button></td>
					</tr>
				{{/each}}	
				</tbody>
				
			</table>

			</fieldset>

		</section>

		

	</script>



	
  </body>

JavaScript

window.Todos = Ember.Application.create();
Todos.ApplicationAdapter = DS.FixtureAdapter.extend();

Todos.Router.map(function() {
  this.resource('todos', { path: '/' });
});

Todos.Todo = DS.Model.extend({
  ResourceAddress: DS.attr('string'),
  ResourceDescription: DS.attr('string')
});

Todos.TodosRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('todo');
  }
});


Todos.Todo.FIXTURES = [{id:1, ResourceAddress: 'http://www.discoversdk.com', ResourceDescription:'Great site'}];


Todos.TodosController = Ember.ArrayController.extend({
  actions: {
    createTodo: function() {
      // Get the todo title set by the "New Todo" text field
      var description = this.get('description');
      var url = this.get('url');
      // console.log(description);
      if (!description.trim()) { return; }
      if (!url.trim()) { return; }
      

      // Create the new Todo model
      var todo = this.store.createRecord('todo', {
        ResourceAddress: url,
        ResourceDescription: description
      });

      // Clear the "New Todo" text field
      this.set('url', '');
      this.set('description', '');

      // Save the new model
      todo.save();
    },
    showResource: function(){
    	var resources = this.store.findAll('todo').then(function(data){
        var allResources = data.map(function(x) { return x.toJSON(); });
        // console.log(allResources);
        alert(JSON.stringify(allResources));
      });
      // console.log(resources);
      
    	// alert(this.JSONSerializer(resources));
    },
    removeTodo: function (index) {
		// var todo = this.get('model');
		// console.log(todo);
		// todo.deleteRecord();
		// todo.save();


		this.store.find('todo', index).then(function (post) {
		  post.destroyRecord(); // => DELETE to /posts/2
		});
	}
  }
});



Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      //...