Formatting 3#Approach

3#Approach

by Nairam

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script src="http://downloads.netobjects.com/mobile/ember/localstorage_adapter.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    {{#linkTo "start" }}Go to Start{{/linkTo}}
    
</script>
<script type="text/x-handlebars" data-template-name="start"><h1>Conversion</h1>
    <label>Conversion Factor:</label>
    {{view Ember.TextField valueBinding="conversionFactor"}}
    {{#linkTo "amounts" }}Show Amounts{{/linkTo}} 
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="amounts">
    <h2>Amounts</h2>
  <table>
    <thead>
        <tr>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        {{#each controller}}
        <tr>
            <td>{{converted amount conversionFactor}}</td>
        </tr>
        {{else}}
        <tr>
            <td>No amounts here yet</td>
        </tr>
        {{/each}}
    </tbody>
    </table>
    {{#linkTo "amounts.new" }}Create new amount{{/linkTo}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="amounts/new">
    <h3>New Amount</h3>
    
    <form {{action "save" on="submit" }}>
        <label>Amount</label>
        {{view Ember.TextField valueBinding="amount" }}
        
        <button>Create amount</button>
    </form>
</script>

JavaScript

App = Ember.Application.create();

App.Store = DS.Store.extend({
    adapter: DS.LSAdapter.create()
});

//Model
App.Amount = DS.Model.extend({
    amount: DS.attr('number')
});


// Router
App.Router.map(function() {
    this.resource('start', function() {
    this.resource('amounts', function() {
        this.route('new')
    });
    });
});


// Routes
App.StartRoute = Ember.Route.extend({
});


App.AmountsRoute = Ember.Route.extend({
    model: function() {
        return App.Amount.find();
    }
    
});

App.AmountsNewRoute = Ember.Route.extend({
    model: function() {
        return App.Amount.createRecord();
    }
});

//controller
App.StartController = Ember.ObjectController.extend({
    conversionFactor: null
});

App.AmountsController = Ember.ArrayController.extend({
    needs: 'start',
    // should proxy "conversionFactor" from App.StartController
    conversionFactor: function() {
        return this.get("controllers.start.conversionFactor");
    }.property('controllers.start.conversionFactor')
});

App.AmountsNewController = Ember.ObjectController.extend({
    save: function() {
        this.get("model.transaction").commit();
        this.get("target").transitionTo("amounts");
    }
});

// not sure if I can define the formatting helper like this:
Ember.Handlebars.helper('converted', function(amount, conversionFactor) {
    return amount * conversionFactor;
});