JavaScript Server Technologies

What is Ember.js?

EmberJS is yet another MVC framework

that uses best practices and is optimal

for single page web applications.

What is Ember.js?

One of the main pros to using Ember over other

frameworks is that it can dramatically decrease

the amount of code that you need to write when

compared to other frameworks in its class

Built for productivity

Friendly APIs

Ember Data (Next Slide)

What is Special About Ember.js?

A data persistence library that maps client-side

models to server-side data

Ember Data can load or save records as well as

their relationships without the need to configure a

REST API

Easily Configurable Using Adapters – Can

work with almost any kind of server

Ember Data

Router – URL representations of the app objects

Models – Collections of data

Controllers – Called from a route. It is the bridge

between model and view/template

Templates/Views – The presentation or visual

part of your app

Helpers – Functions that modify outputs before

they are rendered

Important Aspects of EmberJS

<script type="text/x-handlebars" id="templatename">

<div>I'm a template</div>

</script>

You can also create .hbs files

Handlebars Templates

Tasks.Router.map(function () {

this.resource('tasks', { path: '/' });

});

Tasks.TasksRoute = Ember.Route.extend({

model: function () {

return this.store.find('task');

}

});

Instantiate the Router & Get Model

Tasks.Router.map(function () {

this.resource('tasks', { path: '/' });

});

Tasks.TasksRoute = Ember.Route.extend({

model: function () {

return this.store.find('task');

}

});

Instantiate the Router & Get Model

Tasks.Task = DS.Model.extend({

title: DS.attr('string'),

note: DS.attr('string'),

isDone: DS.attr('boolean')

});

Building the model

Tasks.Task.FIXTURES = [{ id: 1,

title: 'Bring Kids To Shcool',

note: 'Bring kids to school on Monday',

isDone: true

},

{

id: 2,

title: 'Business Meeting',

note: 'Business meeting with my company at 3pm on

Wed',

isDone: false

}];

<button {{action ‘editTask' }}>Edit</button>

Tasks.TaskController = Ember.ObjectController.extend({actions: { editTask: function () { alert(1); },

removeTask: function () { var task = this.get('model'); task.deleteRecord(); task.save(); }});

Controller Actions

THAT’S IT!