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>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
​
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/beta/ember.debug.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
​
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">  
</head>
<body>
​
  <script type="text/x-handlebars">
    <h2>Table example</h2>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
    {{input value=empty.name}}
    <button {{action 'save' empty}}>Save</button>
  
    {{#each model as |record|}}
      <div>{{record.name}}</div>
    {{/each}}
  </script>
  
  
 
</body>
</html>
​
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
​
.rc-handle:hover{
  border-left: 1px solid;
  border-style: dashed;
  border-top: none;
  border-right: none;
  border-bottom: none;
}
​
th {
  cursor: pointer;
}
​
 
App = Ember.Application.create();
​
App.Router.map(function() {
  // put your routes here
});
​
App.ApplicationAdapter= DS.RESTAdapter; 
​
App.Customer = DS.Model.extend({
    name: DS.attr('string'),
    city: DS.attr('string')
});
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.findAll('customer');
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    var empty = this.store.createRecord('customer');
    controller.set('empty', empty);
  },
  actions: {
    save: function(record) {
      /*
      record.copy().then(function(copy){
        copy.save();
      })*/
      record.rollbackAttributes();
    }
  }
  
});
​
​
​
/*---------------Data------------------*/
var customers = {
  "customers":[
    {"id":1,"name":"Terry Bogard", city: 'Delaware'},
    {"id":2,"name":"Joe Higashi", city: 'Tokyo'},
    {"id":3,"name":"Richard Meyer", city: 'Albuquerque'},
    {"id":4,"name":"Kim Kaphwan", city: 'Seoul'},
    {"id":5,"name":"Ryo Sakazaki ", city: 'Tokyo'},
    {"id":6,"name":"Takuma Sakazaki ", city: 'Tokyo'},
  ]
};
​
$.mockjax({
    url:  '/customers',
    dataType: 'json',
    responseText: customers
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers