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>JS Bin</title>
</head>
<body>
    <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" id="index">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
​
<table>
    <h2>Total: {{totalBoth}}</h2>
    <thead>
        <tr>
            <th>name</th>
            <th>count A</th>
            <th></th>
            <th>count B</th>
            <th></th>
            <th>total</th>
        </tr>
    </thead>
    <tbody>
        {{#each type in App.TypeNumbers}}
        <tr>
            <td>{{type.name}}</td>
            <td>
                <button {{action "typeADecrease" type}}>-</button>
                {{input value=type.countA}}
                <button {{action "typeAIncrease" type}}>+</button>
            </td>
            <td>{{type.typeA}}</td>
            <td>
                <button {{action "typeBDecrease" type}}>-</button>
                {{input value=type.countB}}
                <button {{action "typeBIncrease" type}}>+</button>
            </td>
            <td>{{type.typeB}}</td>
            <td>{{type.calculatedTotal}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>
  </script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
  <script type="text/javascript">
App = Ember.Application.create();
​
App.Router.map(function() {
  // put your routes here
});
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});
​
App.IndexController = Ember.ArrayController.extend({
​
    calculatedTotalBinding    : 'App.TypeNumber.calculatedTotal',
​
    totalBoth   : function(){
        var total = 0;
        App.TypeNumbers.forEach(function(item){
            console.log( item.get('calculatedTotal') );
            total += item.get('calculatedTotal');
        });
        return total;
    }.property( 'calculatedTotal' ),
​
    actions : {
        typeADecrease  : function(type){
            var currentCount    = type.get('countA');
            if (currentCount <= 0){
                type.set('countA', 0);
            }else{
                type.set('countA', --currentCount);
            }
        },
​
        typeAIncrease  : function(type){
            var currentCount    = type.get('countA');
            type.set('countA', ++currentCount);
        },
        
        typeBDecrease      : function(type){
            var currentCount    = type.get('countB');
            if (currentCount <= 0){
                type.set('countB', 0);
            }else{
                type.set('countB', --currentCount);
            }
        },
​
        typeBIncrease      : function(type){
            var currentCount    = type.get('countB');
            type.set('countB', ++currentCount);
        },
    }
​
});
​
App.TypeNumber= Ember.Object.extend({
    name        : '',
    typeA       : 11,
    countA      : 0,
    typeB       : 22,
    countB      : 0,
    calculatedA   : function(){
        return ( this.get('typeA') * this.get('countA') );
    }.property('typeA', 'countA'),
    calculatedB     : function(){
        return ( this.get('typeB') * this.get('countB') );
    }.property('typeB', 'countB'),
    calculatedTotal     : function(){
        return ( this.get('calculatedA') + this.get('calculatedB') );
    }.property( 'calculatedA', 'calculatedB' ),
});
​
App.TypeNumbers  = [
    App.TypeNumber.create({
        name     : 'test 1',
        typeA    : 1,
        countA   : 2,
        typeB    : 2,
        countB   : 0,
    }),
    App.TypeNumber.create({
        name     : 'test 2',
        typeA    : 11,
        countA   : 0,
        typeB    : 22,
        countB   : 0,
    }),
    App.TypeNumber.create({
        name     : 'test 3',
        typeA    : 111,
        countA   : 0,
        typeB    : 222,
        countB   : 0,
    }),
    App.TypeNumber.create({
        name     : 'test 4',
        typeA    : 1111,
        countA   : 0,
        typeB    : 2222,
        countB   : 0,
    })
];
  </script>
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers