CoffeeKlatsch

Ember.js app that displays coffee prices.

by Christopher Spears

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.3.0/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.5/ember-data.js"></script>
<body>

  <h2>Coffee Klatsch</h2>

  <script type="text/x-handlebars" data-template-name="coffee">
    <table>
      <tr>
        <th>Beans</th>
        <th>Prices</th>
      </tr>
      {{#each}}
      <tr>
        {{#if isEditing}}
          Blah
          <td>{{input type="text"}}</td>
          <td>{{input type="text"}}</td>
          <td><button class="delete">Delete</button></td>
        {{else}}
          <td {{action "editCoffee" on="doubleClick"}}>{{bean}}</td>
          <td {{action "editCoffee" on="doubleClick"}}>{{price}}</td>
          <td><button class="delete">Delete</button></td>
        {{/if}}
      </tr>
      {{/each}}
    </table>

    {{input type="text" placeholder="Beans" value=newBean}}
    {{input type="text" placeholder="Price" value=newPrice}}
    <button type="button" {{action 'createCoffee'}}>Submit</button>

  </script>

  <script src="js/libs/jquery-1.10.2.js"></script>
  <script src="js/libs/handlebars-1.1.2.js"></script>
  <script src="js/libs/ember-1.3.1.js"></script>
  <script src="js/libs/ember-data.js"></script>
  <script src="js/app.js"></script>
  <!-- to activate the test runner, add the "?test" query string parameter -->
  <script src="tests/runner.js"></script>
</body>

CSS

/* Put your CSS here */
.ember-application {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

// Routes
App.Router.map(function() {
  this.resource('coffee', { path: '/' });
});

App.CoffeeRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('coffee');
  }
});

// Models
App.Coffee = DS.Model.extend({
  bean: DS.attr('string'),
  price: DS.attr('string')
});

App.Coffee.FIXTURES = [
  {
    id: 1,
    bean: 'Espresso Torro',
    price: '$17.75'
  },
  {
    id: 2,
    bean: 'Sulawesi Toarco AA Tana Toraja',
    price: '$18.75'
  },
  {
    id: 3,
    bean: '100% Estate Kona',
    price: '$39.75'
  }, 
];

// Controllers
App.CoffeeController = Ember.ArrayController.extend({
  actions: {
    createCoffee: function() {
      // Get the bean name
      var bean = this.get('newBean');
      if (!bean.trim()) { return; }

      // Get the price
      var price = this.get('newPrice');
      if (!price.trim()) { return; }

      // Create the new coffee model
      var coffee = this.store.createRecord('coffee', {
        bean: bean,
        price: price
      });

      // Clear the text fields
      this.set('newBean', '');
      this.set('newPrice', '');

      // Save the new model
      coffee.save();
    },

    isEditing: false,

    editCoffee: function () {
      console.log('Hello World');
      this.set('isEditing', true);
    }

  }
});

// Creating Edit View
App.EditCoffeeView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Ember.Handlebars.helper('edit-coffee', App.EditCoffeeView);