Ember-Cerebral TodoMVC

A TodoMVC fulx implementation using Cerebral and Ember.

• Provides a mixin to bind cerebral store data to computed properties on Ember Components.

import hbs from 'htmlbars-inline-precompile';
import CerebralMixin from 'ember-cerebral/mixins/cerebral-mixin';

export default Ember.Component.extend(CerebralMixin, {
  cerebralProps() {
    return {
      currentlyEditingTodoIds: 'currentlyEditingTodoIds'
    }
  },

  isEditing: Ember.computed('currentlyEditingTodoIds', 'todo', function() {
    return this.get('currentlyEditingTodoIds').includes(this.get('todo.id'));
  }),

  layout: hbs`
    <li>
      <input type="checkbox">
			{{#if isEditing}}
				{{edit-todo todo=todo}}
			{{/if}}
    </li>
  `
});

• Co-locates templates with their backing components (React style) using htmlbars-inline-precompile.
• GET api/todos and POST api/todo/:id endpoints are mocked using Ember CLI MIRAGE to demonstrate ajax requests.

Thanks

Thanks to Toran Billups (@toranb) who's screencast on ember-redux inspired this integration.

---

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)
• Bower
• Ember CLI
• PhantomJS

Installation

• git clone <repository-url> this repository
• change into the new directory
• npm install
• bower install

Running / Development

• ember server
• Visit your app at http://localhost:4200.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox