Skip to content

Instantly share code, notes, and snippets.

@manish-shrivastava

manish-shrivastava/emberjs-very-important-doc.md

Forked from dreikanter/emberjs-cheat-sheet.md
Last active December 21, 2016 20:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save manish-shrivastava/2f779283132b2cdcd8cb5299fc9ed3be to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save manish-shrivastava/2f779283132b2cdcd8cb5299fc9ed3be to your computer and use it in GitHub Desktop.
Download ZIP
Ember.js Brief.md
Raw
emberjs-cheat-sheet.md

Core concepts

Model

  • 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 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.
<script type="text/x-handlebars">
  <div>
    {{outlet}}
  </div>
</script>
  • By default Ebmer will application template to the document's body element.
  • Root element could be changed during app creation: rootElement: '#app'.
App = Ember.Application.create({
  rootElement: '#app'
});

Router

  • Translates URL into nested templates.
  • Keep browser address line updated.
App.Router.map(function() {
  this.resource('tasks', function() {
      this.route('task', { path: '/:task_id' });
  });

  this.route('user');
  this.route('project', { path: '/about' });
});

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.
App.FavoritesRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('project');
  }
});

View

  • ?

Controller

  • Template can get properties from controller.
  • Used to provide the logic used to access data from the Model (e.g. calculated data).
App.UserController = Ember.ObjectController.extend({
  fullName: function() {
    return this.get("first_name") + " " + this.get("last_name");
  }
});

Component

  • Reusable UI element.
Raw
example-1.html
<!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>
Raw
example-2.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment