emberjs.md

Ember.js

http://emberjs.com/

• https://github.com/emberjs/ember.js

• https://github.com/emberjs/starter-kit

• Ember Inspector for Google Chrome

• Ember Inspector for Mozilla Firefox

Ember.js Resources

• Building an App with Ember.js (YouTube)
• Building an Ember.js Application (YouTube)
• Mastering Ember Js (YouTube Playlist)
• Ember Screencasts
• EmebrCasts
• EmberCast
• Ember 101
• EmberWatch
• Built With Ember
• Ember CLI
• Ember Weekly Newsletter
• Single Page App with Laravel and EmberJS
• Improving Your Ember.js Workflow Using Gulp.js
• CRUD example app without Ember Data
• Getting Started with Ember Data
• Ember Data Model Maker
• How to write a login form that doesn't suck, using Ember.js
• Getting Into Ember.js (Tutsplus)
• Getting into Ember.js: The Next Steps (Tutsplus)
• Getting Into Ember.js: Part 3 (Tutsplus)
• Getting Into Ember: Part 4 (Tutsplus)
• Getting Into Ember.js: Part 5 (Tutsplus)
• Resources to Get You Up to Speed in Ember.js
• Master Developers: The Ember.js Core Team
• An In-Depth Introduction To Ember.js
• Dependency Injection in Ember.js - First Steps
• Ember–The Missing EmberJS Tutorial
• Settings variables for Ember.js project (Example)
• Use NProgress with Ember.js
• Awesome Ember.js Form Components
• Ember Component Examples
• Ember Framework Tutorial (YouTube)
• Getting Started with Ember.js using Ember CLI

App files

• Ember.js
• Handlebars.js
• jQuery
• Ember Handlebars Loader
• Mongoose Server
• Ember LocalStorage Adapter

Routes

// app.js
App = Ember.Application.create();

App.Router.map(function() {
  this.route("about");
  this.route("collections");
  this.resource("exhibits");
  this.route("notes");
});

Nested Routes

// app.js

// this will be instead of "exhibits" resource route

this.resource("exhibits", function(){
  this.resource("exhibit", { path: "/:exhibit_id" });
});

Templates (Handlebars)

// index.html

<script type="text/x-handlebars">
<div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" data-template-name="index">
<h1>Index</h1>
</script>

<script type="text/x-handlebars" id="about">
<h1>About Section</h1>
</script>

Link-to helper

{{#link-to "routeName" class="some-class"}}Some link{{/link-to}}

To load another template inside the template that is calling that template, we should add the this keyword:

{{#link-to "nestedRouteName" this}}Template inside a template{{/link-to}}

For this to work, we have to add an {{outlet}} in the parent template.

Component

<script type="text/x-handlebars" id="components/my-component">
  <h1>My Component</h1>
  <span class="myClass">Hello, World</span>
</script>

// display the component
<script type="text/x-handlebars" id="myTemplate">
  {{my-component}}
</script>

Example (with bind-attr and yield):

<script type="text/x-handlebars" id="components/single-collection">
  <h3>{{title}}</h3>
  <img {{bind-attr src=image}}>
  {{yield}}
</script>

<script type="text/x-handlebars" id="collections">
  <section>
    {{#each}}
      {{#single-collection title=title image=image}}
        {{copy}}
      {{/single-collection}}
    {{/each}}
  </section>
</script>

Customize the wrapper of the component:

// app.js

App.SingleCollectionComponent = Ember.Component.extend({
  tagName: "article",
  classNames: ["collectionArticleClass cf"]
});

Models

Controllers

Route Controllers

// app.js

App.CollectionsRoute = Ember.Route.extend({
  model: function(){
    return []; // JSON
  }
});

Object Controllers

// app.js

App.ExhibitController = Ember.ObjectController.extend({
  exhibitTitle: function() {
    return this.get("title") + " by " + this.get("artist_name");
  }.property("artist_name", "title")
});

Array Controllers

// app.js

App.ExhibitsController = App.ArrayController.extend({
  totalExhibits: function() {
    return this.get("model.length");
  }.property("@each")
});

Web Components

About Web Components

Load external JSON as Model Data

// app.js

App.CollectionsRoute = Ember.Route.extend({
  model: function(){
    return $.getJSON("js/exhibits.json").then(function(data) {
      return data.exhibits;
    });
  }
});

Ember Data (local storage)

// app.js

App.Note = DS.Model.extend({
  copy: DS.attr()
});

App.NotesRoute = Ember.Route.extend({
  model: functon() {
    return this.store.find("note");
  }
});

App.NotesController = Ember.ArrayController.extend({
  actions: {
    newNote: function() {
      var copy = this.get("noteText");
      if (!copy) {
        return false;
      }
      
      var note = this.store.createRecord("note", {
        copy: copy
      });
      
      this.set("noteText", "");
      note.save();
    }
  }
});

App.ApplicationAdapter = DS.LSAdapter.extend({
  namespace: "samocaNotes"
});