manish-shrivastava · December 21, 2016 20:32 · Dec 21, 2016 · Jan 12, 2015 · Jan 12, 2015 · Jan 12, 2015
diff --git a/emberjs-cheat-sheet.md → emberjs-very-important-doc.md b/emberjs-cheat-sheet.md → emberjs-very-important-doc.md
diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -69,7 +69,7 @@ App.FavoritesRoute = Ember.Route.extend({
 ```
 
 - Using Ember Data is not mandatory. Model could be a plain JSON object:
-- 
+
 ``` js
 App.UserRoute = Ember.Route.extend({
   model: function(params) {

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -68,6 +68,19 @@ App.FavoritesRoute = Ember.Route.extend({
 });
 ```
 
+- Using Ember Data is not mandatory. Model could be a plain JSON object:
+- 
+``` js
+App.UserRoute = Ember.Route.extend({
+  model: function(params) {
+    return {
+      first_name: "Eric",
+      last_name : "Sipple"
+    };
+  }
+});
+```
+
 ### View
 
 - Views are for **Creating reusable components** and **Setting up logic to handle events.**

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -102,7 +102,7 @@ App.UserController = Ember.ObjectController.extend({
 });
 ```
 
-- May contain property and observer declarations (attention to get/set calls):
+- May contain property and observer declarations (attention to get/set calls). Controller property monitors enumerated values and evaluate associated function. Observer executes their action respectively:
 
 ``` js
 App.NumberController = Ember.ObjectController.extend({
@@ -122,6 +122,8 @@ App.NumberController = Ember.ObjectController.extend({
 
 ```
 
+- Example above will make this template alive:
+
 ``` handlebars
 {{input type="text" value=number size="50"}} x2 = {{timesTwo}}
 ```

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -102,15 +102,24 @@ App.UserController = Ember.ObjectController.extend({
 });
 ```
 
-- Attention to the property declaration (`.property()`) ad get/set calls:
+- May contain property and observer declarations (attention to get/set calls):
 
 ``` js
 App.NumberController = Ember.ObjectController.extend({
   number: 1,
   timesTwo: function() {
     return Number(this.get('number')) * 2;
-  }.property('number')
+  }.property('number'),
+  fullName: function() {
+    // Calculate some value
+    return this.get("first_name") + " " + this.get("last_name");
+  }.property('first_name', 'last_name'),
+  nameChanged: function() {
+    // Execute some action
+    console.log("New name! New name!");
+  }.observes('first_name', 'last_name')
 });
+
 ```
 
 ``` handlebars

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -11,7 +11,7 @@
 - Templates are written in Handlebars.
 - Has a name (file name or `data-template-name` attribute value of `<script>` element).
 - Backed by a model and auto-updates following model changes.
-- Can retrieve properties from model and controller.
+- Can retrieve properties from Model and Controller.
 - Can nest one another template with `{{outlet}}` expression.
 - Uses `text/x-handlebars` type when defined in `<script>` blocks.
 - Unnamed script block will be treated as `application` (root) template.
@@ -24,14 +24,17 @@
 </script>
 ```
 
-- By default Ebmer will application template to the document's body element.
-- Root element could be changed during app creation: `rootElement: '#app'`.
+- By default Ember will attach `application` template to the document's body element.
+- Root element could be changed during app creation:
 
 ``` js
 App = Ember.Application.create({
   rootElement: '#app'
 });
 ```
+
+- There are partial templates that can be included with `render` Handlebars expression.
+
 ### Router
 
 - Router recognizes URL, and passes it to a Route object.
@@ -51,7 +54,8 @@ App.Router.map(function() {
 
 ### Route
 
-- An object that tells model which template to show.
+- Route sets up a Controller and supplies it with a Model.
+- Tells model which template to show.
 - Each route has controller and template with the same name.
 - Routes can implement hooks.
 - `model` hook can specify what model will be represented to the template by controller.
@@ -87,8 +91,8 @@ App.UserController = Ember.ObjectController.extend({
 
 ### Controller
 
-- Template can get properties from controller.
-- Used to provide the logic used to access data from the Model (e.g. calculated data).
+- Controller provides Model data to the Template.
+- Can be used to process Model data for the Template (calculated properties).
 
 ``` js
 App.UserController = Ember.ObjectController.extend({

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -34,7 +34,7 @@ App = Ember.Application.create({
 ```
 ### Router
 
-- Router recognizes and passes to a Route object.
+- Router recognizes URL, and passes it to a Route object.
 - Translates URL into nested templates.
 - Keep browser address line updated. 
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -34,6 +34,7 @@ App = Ember.Application.create({
 ```
 ### Router
 
+- Router recognizes and passes to a Route object.
 - Translates URL into nested templates.
 - Keep browser address line updated. 
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -97,6 +97,21 @@ App.UserController = Ember.ObjectController.extend({
 });
 ```
 
+- Attention to the property declaration (`.property()`) ad get/set calls:
+
+``` js
+App.NumberController = Ember.ObjectController.extend({
+  number: 1,
+  timesTwo: function() {
+    return Number(this.get('number')) * 2;
+  }.property('number')
+});
+```
+
+``` handlebars
+{{input type="text" value=number size="50"}} x2 = {{timesTwo}}
+```
+
 ### Component
 
 - Reusable UI element.
diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -66,6 +66,23 @@ App.FavoritesRoute = Ember.Route.extend({
 ### View
 
 - Views are for **Creating reusable components** and **Setting up logic to handle events.**
+- Can be used to handle browser events, and send the result to controller:
+
+``` js
+App.ProfilePhotoView = Ember.View.extend({
+  click: function(evt) {
+    this.get('controller').send('expandProfilePhoto');
+  }
+});
+
+App.UserController = Ember.ObjectController.extend({
+  actions: {
+    expandProfilePhoto: function() {
+      // Get the expanded picture and display it
+    }
+  }
+});
+```
 
 ### Controller
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -65,7 +65,7 @@ App.FavoritesRoute = Ember.Route.extend({
 
 ### View
 
-- ?
+- Views are for **Creating reusable components** and **Setting up logic to handle events.**
 
 ### Controller
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -58,7 +58,7 @@ App.Router.map(function() {
 ``` js
 App.FavoritesRoute = Ember.Route.extend({
   model: function() {
-    return this.store.find('post');
+    return this.store.find('project');
   }
 });
 ```
@@ -70,7 +70,15 @@ App.FavoritesRoute = Ember.Route.extend({
 ### Controller
 
 - Template can get properties from controller.
-- ?
+- Used to provide the logic used to access data from the Model (e.g. calculated data).
+
+``` js
+App.UserController = Ember.ObjectController.extend({
+  fullName: function() {
+    return this.get("first_name") + " " + this.get("last_name");
+  }
+});
+```
 
 ### Component
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -15,8 +15,6 @@
 - Can nest one another template with `{{outlet}}` expression.
 - Uses `text/x-handlebars` type when defined in `<script>` blocks.
 - Unnamed script block will be treated as `application` (root) template.
-- By default Ebmer will application template to the document's body element.
-- Root element could be changed during app creation: `rootElement: '#app'`.
 
 ``` handlebars
 <script type="text/x-handlebars">
@@ -26,6 +24,14 @@
 </script>
 ```
 
+- By default Ebmer will application template to the document's body element.
+- Root element could be changed during app creation: `rootElement: '#app'`.
+
+``` js
+App = Ember.Application.create({
+  rootElement: '#app'
+});
+```
 ### Router
 
 - Translates URL into nested templates.

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -15,6 +15,8 @@
 - Can nest one another template with `{{outlet}}` expression.
 - Uses `text/x-handlebars` type when defined in `<script>` blocks.
 - Unnamed script block will be treated as `application` (root) template.
+- By default Ebmer will application template to the document's body element.
+- Root element could be changed during app creation: `rootElement: '#app'`.
 
 ``` handlebars
 <script type="text/x-handlebars">
@@ -67,6 +69,3 @@ App.FavoritesRoute = Ember.Route.extend({
 ### Component
 
 - Reusable UI element.
-
----
-
diff --git a/example-2.html b/example-2.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta content='IE=Edge,chrome=1' http-equiv='X-UA-Compatible'>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+    <title>Example Angular App</title>
+    <link rel="stylesheet" media="all" href="/assets/bootstrap_and_overrides.css?body=1" />
+    <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico" />
+    <script src="/assets/jquery/jquery.js?body=1"></script>
+    <script src="/assets/jquery.js?body=1"></script>
+    <script src="/assets/jquery.ui.touch-punch.js?body=1"></script>
+    <script src="/assets/handlebars.js?body=1"></script>
+    <script src="/assets/ember.js?body=1"></script>
+    <script src="/assets/ember-data.js?body=1"></script>
+  </head>
+  <style>
+    body {
+      padding: 20px;
+    }
+  </style>
+<body>
+
+  <script type="text/x-handlebars">
+    <h1>{{appName}}</h1>
+    <h2>{{title}}</h2>
+
+    {{outlet}}
+  </script>
+
+  <script type="text/x-handlebars" data-template-name="projects_list">
+    <ul>
+      {{#each item in model}}
+        <li>{{#link-to 'project' item.id}}{{item.title}}{{/link-to}}</li>
+      {{/each}}
+    </ul>
+  </script>
+
+  <script type="text/x-handlebars" data-template-name="list_item">
+      <li>{{#link-to 'project' item.id}}{{item.title}}{{/link-to}}</li>
+  </script>
+
+  <script type="text/x-handlebars" data-template-name="project">
+    <dl>
+      <dt>Title:</dt>
+      <dd>{{model.title}}</dd>
+      <dt>ID:</dt>
+      <dd>{{model.id}}</dd>
+    </dl>
+  </script>
+
+  <script>
+    var App = Ember.Application.create({
+      LOG_TRANSITIONS: true
+    });
+
+    App.ApplicationRoute = Ember.Route.extend({
+      setupController: function(controller) {
+        controller.set('title', "Hello world!");
+      }
+    });
+
+    App.ApplicationController = Ember.Controller.extend({
+      appName: 'My First Example'
+    });
+
+    App.Router.map(function() {
+      this.route('projects_list', { path: 'projects' });
+      this.route('project', { path: 'projects/:project_id' });
+    });
+
+    App.ProjectsController = Ember.Controller.extend({
+
+    });
+
+    var PROJECTS = [
+      {
+        id: 1,
+        title: 'Project 1'
+      },
+      {
+        id: 2,
+        title: 'Project 2'
+      }
+    ];
+
+    App.ProjectsListRoute = Ember.Route.extend({
+      model: function() {
+        return PROJECTS;
+      }
+    });
+
+    App.ProjectRoute = Ember.Route.extend({
+      model: function(params) {
+        if (!PROJECTS[params.project_id]) {
+          return null;
+        }
+
+        return PROJECTS[params.project_id];
+      }
+    });
+  </script>
+
+</body>
+</html>
diff --git a/example-1.html b/example-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta content='IE=Edge,chrome=1' http-equiv='X-UA-Compatible'>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+    <title>Example Angular App</title>
+    <link rel="stylesheet" media="all" href="/assets/bootstrap_and_overrides.css?body=1" />
+    <link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico" />
+    <script src="/assets/jquery/jquery.js?body=1"></script>
+    <script src="/assets/jquery.js?body=1"></script>
+    <script src="/assets/jquery.ui.touch-punch.js?body=1"></script>
+    <script src="/assets/handlebars.js?body=1"></script>
+    <script src="/assets/ember.js?body=1"></script>
+    <script src="/assets/ember-data.js?body=1"></script>
+  </head>
+<body>
+
+<script type="text/x-handlebars">
+  <h1>{{appName}}</h1>
+  <h2>{{title}}</h2>
+</script>
+
+<script>
+  var App = Ember.Application.create({
+    LOG_TRANSITIONS: true
+  });
+
+  App.ApplicationRoute = Ember.Route.extend({
+    setupController: function(controller) {
+      controller.set('title', "Hello world!");
+    }
+  });
+
+  App.ApplicationController = Ember.Controller.extend({
+    appName: 'My First Example'
+  });
+</script>
+
+</body>
+</html>
diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -12,9 +12,7 @@
 - Has a name (file name or `data-template-name` attribute value of `<script>` element).
 - Backed by a model and auto-updates following model changes.
 - Can retrieve properties from model and controller.
-- Can be nested.
-- One template can nest only one child template.
-- Nesting is implemented with `{{outlet}}` expression.
+- Can nest one another template with `{{outlet}}` expression.
 - Uses `text/x-handlebars` type when defined in `<script>` blocks.
 - Unnamed script block will be treated as `application` (root) template.
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -11,6 +11,7 @@
 - Templates are written in Handlebars.
 - Has a name (file name or `data-template-name` attribute value of `<script>` element).
 - Backed by a model and auto-updates following model changes.
+- Can retrieve properties from model and controller.
 - Can be nested.
 - One template can nest only one child template.
 - Nesting is implemented with `{{outlet}}` expression.

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -5,6 +5,15 @@
 - An object that stores data (data persistance layer abstraction).
 - Templates transforms models into HTML.
 - Same thing as Rails model.
+
+### Template
+
+- Templates are written in Handlebars.
+- Has a name (file name or `data-template-name` attribute value of `<script>` element).
+- Backed by a model and auto-updates following model changes.
+- Can be nested.
+- One template can nest only one child template.
+- Nesting is implemented with `{{outlet}}` expression.
 - Uses `text/x-handlebars` type when defined in `<script>` blocks.
 - Unnamed script block will be treated as `application` (root) template.
 
@@ -16,15 +25,6 @@
 </script>
 ```
 
-### Template
-
-- Templates are written in Handlebars.
-- Has a name (file name or `data-template-name` attribute value of `<script>` element).
-- Backed by a model and auto-updates following model changes.
-- Can be nested.
-- One template can nest only one child template.
-- Nesting is implemented with `{{outlet}}` expression.
-
 ### Router
 
 - Translates URL into nested templates.

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -5,6 +5,16 @@
 - An object that stores data (data persistance layer abstraction).
 - Templates transforms models into HTML.
 - Same thing as Rails model.
+- Uses `text/x-handlebars` type when defined in `<script>` blocks.
+- Unnamed script block will be treated as `application` (root) template.
+
+``` handlebars
+<script type="text/x-handlebars">
+  <div>
+    {{outlet}}
+  </div>
+</script>
+```
 
 ### Template
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -4,6 +4,7 @@
 
 - An object that stores data (data persistance layer abstraction).
 - Templates transforms models into HTML.
+- Same thing as Rails model.
 
 ### Template
 

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -37,6 +37,14 @@ App.Router.map(function() {
 - Routes can implement hooks.
 - `model` hook can specify what model will be represented to the template by controller.
 
+``` js
+App.FavoritesRoute = Ember.Route.extend({
+  model: function() {
+    return this.store.find('post');
+  }
+});
+```
+
 ### View
 
 - ?

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -33,13 +33,17 @@ App.Router.map(function() {
 ### Route
 
 - An object that tells model which template to show.
+- Each route has controller and template with the same name.
+- Routes can implement hooks.
+- `model` hook can specify what model will be represented to the template by controller.
 
 ### View
 
 - ?
 
 ### Controller
 
+- Template can get properties from controller.
 - ?
 
 ### Component

diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -1,4 +1,4 @@
-Core concepts:
+## Core concepts
 
 ### Model
 
@@ -45,3 +45,6 @@ App.Router.map(function() {
 ### Component
 
 - Reusable UI element.
+
+---
+
diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -1,17 +1,23 @@
 Core concepts:
 
-- Template
-  - Templates are written in Handlebars.
-  - Each template has a name (file name or `data-template-name` attribute value of `<script>` element).
-  - Each template is backed by a model and auto-updates following model changes.
-- Router
-- Route
-- Model
-- View
-- Controller
+### Model
 
+- An object that stores data (data persistance layer abstraction).
+- Templates transforms models into HTML.
 
-## Router
+### Template
+
+- Templates are written in Handlebars.
+- Has a name (file name or `data-template-name` attribute value of `<script>` element).
+- Backed by a model and auto-updates following model changes.
+- Can be nested.
+- One template can nest only one child template.
+- Nesting is implemented with `{{outlet}}` expression.
+
+### Router
+
+- Translates URL into nested templates.
+- Keep browser address line updated. 
 
 ``` js
 App.Router.map(function() {
@@ -23,3 +29,19 @@ App.Router.map(function() {
   this.route('project', { path: '/about' });
 });
 ```
+
+### Route
+
+- An object that tells model which template to show.
+
+### View
+
+- ?
+
+### Controller
+
+- ?
+
+### Component
+
+- Reusable UI element.
diff --git a/emberjs-cheat-sheet.md b/emberjs-cheat-sheet.md
@@ -0,0 +1,25 @@
+Core concepts:
+
+- Template
+  - Templates are written in Handlebars.
+  - Each template has a name (file name or `data-template-name` attribute value of `<script>` element).
+  - Each template is backed by a model and auto-updates following model changes.
+- Router
+- Route
+- Model
+- View
+- Controller
+
+
+## Router
+
+``` js
+App.Router.map(function() {
+  this.resource('tasks', function() {
+      this.route('task', { path: '/:task_id' });
+  });
+
+  this.route('user');
+  this.route('project', { path: '/about' });
+});
+```
No results found