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/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
   <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
​
  <script type="text/x-handlebars">
    {{outlet}}
  </script>
  
   <script type="text/x-handlebars" id="invoices">
    <div class="large-12 columns">
      {{#link-to "invoices.create"}} Add Invoice {{/link-to}}
    </div>
    <ul class="fatturas-listing">
      {{#each invoice in model}}
        <li>
          {{#link-to "invoice" invoice}}
            {{invoice.title}}
          {{/link-to}}
        </li>
       {{else}}
        <li>no fatturas… :(
        </li>
      {{/each}}
    </ul>
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="invoice/edit">
  
  <table>
    <tr>
      <td>{{input valueBinding=title}}</td>
    </tr>
    <tr>
    {{#each controller}}
      <td>{{name}} {{input type=checkbox value=isDone checked=isDone}} {{input valueBinding=quantity}} {{view Em.Select prompt="test" contentBinding="controllers.fare.content" optionLabelPath="content.name" optionValuePath="content.id" selectionBinding="controllers.fare.selectedFare" }}</td>
    {{/each}}
    </tr>
   <tr>
    <td><button {{action "add"}}>Add New Transaction</button></td>
   </tr>
 </table>
 <table>
   <tr>
     <td>{{quantity}}</td>
     <td>{{controllers.fare.selectedFare.name}}</td>
     <td>{{total}}</td>
   </tr>
 </table>
  
  
  </script>
  
​
​
</body>
</html>
​
 
/* Put your CSS here */
html, body {
  margin: 20px;
}
​
​
​
 
App = Ember.Application.create();
​
App.ApplicationAdapter = DS.FixtureAdapter;
​
App.Router.map(function(){ 
    this.resource('invoices', function(){
        this.resource('invoice', { path:'/:fattura_id' }, function(){
            this.route('edit'); 
        });
        this.route('create');
    });
​
    // this is our 404 error route - see MissingRoute just bellow
    this.route('missing', { path: '/*path' });
​
});
​
App.IndexRoute = Ember.Route.extend({
  redirect: function(){
    this.transitionTo('invoices');  
  }
});
​
App.InvoicesRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('invoice');
    } 
});
​
App.InvoicesCreateRoute = Em.Route.extend({   
  
  model: function(){
        // the model for this route is a new empty Ember.Object
        return this.store.createRecord('invoice');
    },
​
    // in this case (the create route) we can re-use the fattura/edit template
    // associated with the fatturasCreateController
    renderTemplate: function(){
        this.render('invoice.edit', {
            controller: 'invoicesCreate' 
        });
    }
​
});  
​
App.InvoicesCreateController = Em.ObjectController.extend({
  needs:['fare'],
​
  // this should be added to the IndexController
  updateTotal: function() {
​
  // get the reference to the values of fare and quantity
  var quantity = this.get('quantity'),
      fare = this.get('controllers.fare.selectedFare.id'); 
​
  // massage them to make sure your stuff is not gonna break
  if (isNaN(fare)) { fare = 0; }
  if (isNaN(quantity)) { quantity = 0; }
​
  // calculate
  var total = fare * quantity;  
 
  // set the total
  this.set('total', total); 
​
  }.observes('quantity', 'controllers.fare.selectedFare'),  
  
  actions: {
    add: function() {
      var newTransaction = Ember.Object.create({
        name: "New Transaction",
        quantity: null,
        selectedFare: null,
        isDone: false
      });
      
      return this.get("content").pushObject(newTransaction);
    }
  }
   
});
​
App.FareController = Em.Controller.extend({ 
 
  selectedFare: null,
  needs:['fare'], 
  
  init: function() {
      this._super();
      this.set('model', this.get('store').find('fare'));
  }
});
​
App.Invoice = DS.Model.extend({
  title         : DS.attr('string'),
  transactions  : DS.hasMany('transaction', { async:true})
});
​
App.Transaction = DS.Model.extend({
  quantity: DS.attr('string'),
  selectedFare: DS.attr('string')
});
​
App.Fare = DS.Model.extend({ 
  name: DS.attr('string')
});
​
 
App.Invoice.reopenClass({
  FIXTURES: [
     {
       id: '1',
       title: 'Test',
       transactions: [1]
     }
  ]
});
​
App.Transaction.reopenClass({
  FIXTURES: [
     {
        id: '1',
        quantity: '100'
     }
    ]
});
​
App.Fare.reopenClass({
  FIXTURES:[
    {
        id: '1',
        name: '100'
    },
    {
        id: '2',
        name: '200'
    }
   ]
});
​
​
​
​
​
Output

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

Dismiss x
public
Bin info
Mannaiopro
0viewers