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">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
</head>
<body>
​
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
   <form>
     <fielset>
       <legend>Notice of Assesment (NOA)</legend>
       {{taxes-form taxes=model.taxes}}
       <label for="average-taxes">Average Taxes</label>
       {{input type="number" value=model.taxes min=0 step="any" required=true placeholder="2 Years' Average" id="average-taxes"}}
     </fielset>
   </form>
  </script>
  <script type="text/x-handlebars" id="components/taxes-form">
  {{#if NOAValues.length}}
    <p class="help">Please provide the first 2 years of assesment for your property.</p>
  {{/if}}
    {{#each NOAValues as |year|}}
        <label for="{{year.year}}-value">{{year.year}}</label>
        {{input type="number" min="0" step="any" value=year.value required=true placeholder="Yearly Income"}}
    {{/each}}
  </script>
</body>
</html>
 
App = Ember.Application.create();
​
App.Router.map(function() {
  // put your routes here
});
​
App.TaxesFormComponent = Ember.Component.extend({
    taxes: null,
    NOAYears: 2,
    NOAValues: Ember.computed("NOAYears", function() {
        var NOAs = [],
            lastYear = new Date().getFullYear() - 1;
        for (var year = 0; year < this.get("NOAYears"); year++) {
            NOAs.push({year: lastYear - year, value: 0});
        }
        return NOAs;
    }),
    NOAYearsChanged: function() {
        // income generated by NOAs should be average of last 2 years, or the last year if the most current year is lower than the one before it
        if (this.get("NOAValues.firstObject.value") > this.get("NOAValues.lastObject.value")) {
            this.set("taxes", this.get("NOAValues.lastObject.value"));
        }
        else { // get the average of all NOA years
            var average = (this.get("NOAValues").reduce(function(previousValue, year) {
                return parseInt(previousValue.get("value")) + parseInt(year.get("value"));
            }, 0)) / this.get("NOAValues.length");
            this.set("taxes", average);
        }
    }.observes("NOAValues.@each.value")
});
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      taxes: 0
    };
  }
});
​
Output

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

Dismiss x
public
Bin info
srsgorespro
0viewers