Your SlideShare is downloading. ×
Ember.js for a CakePHP Developer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ember.js for a CakePHP Developer

4,318
views

Published on

Ember.js is a front end JavaScript MVC framework, but probably won't map to the exact same MVC patterns as CakePHP does on the server side. I cover the major features of Ember.js and attempt to make …

Ember.js is a front end JavaScript MVC framework, but probably won't map to the exact same MVC patterns as CakePHP does on the server side. I cover the major features of Ember.js and attempt to make the connection to CakePHP classes where it applies.

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,318
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. EMBER.JS FOR A CAKEPHP DEVELOPER
  • 2. EMBER.JS A framework for creating ambitious web applications.
  • 3. 1.0 RELEASED!
  • 4. OBJECTS
  • 5. EXTENDING/CREATING OBJECTS var Person, p; Person = Ember.Object.extend({ sayHello: function() { alert('Hello!'); } }); p = Person.create(); p.sayHello();
  • 6. DATA BINDINGS var Person, p; Person = Ember.Object.extend({ message: 'Hello', responseBinding: 'message', yell: function() { alert(this.get('response')); } }); p = Person.create(); p.yell(); // alert('Hello') p.set('message', 'Goodbye'); p.yell(); // alert('Goodbye')
  • 7. COMPUTED PROPERTIES var Person, p; Person = Ember.Object.extend({ firstName: '', lastName: '', fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); p = Person.create({ firstName: 'Joey', lastName: 'Trapp' }); p.get('fullName'); // "Joey Trapp" p.set('firstName', 'Connor'); p.get('fullName'); // "Connor Trapp"
  • 8. CONVENTIONS
  • 9. Type Name Route this.resource('projects'); Route (class) App.ProjectsRoute Controller App.ProjectsController View App.ProjectsView Template Ember.TEMPLATES['projects']
  • 10. TEMPLATES
  • 11. TEMPLATES EMBEDDED IN HTML <script type="text/x-handlebars" data-template-name="project"> <h1>{{title}}</h1> <p>{{description}}</p> </script> Gets compiled on document read to: Ember.TEMPLATES['project'] = // compiled template function
  • 12. TEMPLATES FILES Integrate into build step and compile server side // webroot/templates/projects/add.hbs <form {{action save on="submit"}}> <label>Project Name</label> {{input type="text" value=name}} <input type="submit" value="Save"> </form> Gets compiled with a build tool in development, and as part of a production build step to: Ember.TEMPLATES['projects/add'] = // compiled template function
  • 13. BUILT IN HELPERS <div class="posts"> {{#each post in controller}} {{#if post.isPublished}} <h2>{{#link-to 'post' post}} {{post.title}} {{/link-to}}</h2> {{/if}} {{else}} <p>{{#link-to 'posts.new'}}Create the first post{{/link-to}} {{/each}} </p></div> And many more
  • 14. ROUTER
  • 15. DEFINING ROUTES App.Router.map(function() { this.route('about'); // #/about }); Routes defined this way can not contain nested routes
  • 16. DEFINING RESOURCES App.Router.map(function() { this.resource('conferences'); // #/conferences }); Will render the conferencestemplate in the applicationtemplates outlet.
  • 17. NESTING RESOURCES App.Router.map(function() { this.resource('conferences', function() { // #/conferences this.resource('cakefest'); // #/conferences/cakefest }); }); Will render the cakefesttemplate in the conferences templates outlet, which is rendered in the application templates outlet.
  • 18. DYNAMIC SEGMENTS App.Router.map(function() { this.resource('conferences', function() { // #/conferences this.resource('conference', { path: ':name' }); // #/conferences/blah }); }); By default, the segment value is available in the template. // conference template <h1>{{name}}</h1> <p>...</p>
  • 19. NESTED ROUTES App.Router.map(function() { this.resource('conferences', function() { // #/conferences this.route('new'); // #/conferences/new }); }); Renders conferences/newtemplate in the conferencestemplates outlet.
  • 20. ROUTES
  • 21. DEFINING DATA FOR TEMPLATE window.CONFERENCES = [ Em.Object.create({id: 1, name: 'cakefest' }), Em.Object.create({id: 2, name: 'embercamp' }), Em.Object.create({id: 3, name: 'jsconf' }) ]; var App = Ember.Application.create(); App.Router.map(function() { this.resource('conferences', function() { this.resource('conference', { path: '/:conference_id' }); }); });
  • 22. DEFINING ROUTE CLASSES App.ConferencesRoute = Ember.Route.extend({ model: function() { return window.CONFERENCES; } }); App.ConferenceRoute = Ember.Route.extend({ model: function(params) { return window.CONFERENCES.findProperty( 'id', +params.conference_id ); } });
  • 23. TEMPLATES conferences.hbs <h1>Conferences</h1> {{#each conf in controller}} {{#link-to 'conference' conf}} {{conf.name}} {{/link-to}} {{/each}} conference.hbs <h1>{{name}} Conference</h1> <p>{{desc}}</p>
  • 24. OTHER CALLBACKS App.ConferenceRoute = Ember.Route.extend({ model: function(params) { // Return data for the template }, setupController: function(controller, model) { // Receives instance of this controller and // the return value from model hook }, renderTemplate: function() { // Render template manually if you need to do // something unconventional } });
  • 25. CONTROLLERS
  • 26. Controllers are long lived in Ember*, and are the default context for templates.
  • 27. CONTROLLER Decorates a model, but has no special proxying behavior. App.ApplicationController = Ember.Controller.extend({ search: '', query: function() { var query = this.get('search'); this.transitionToRoute('search', { query: query }); } });
  • 28. OBJECT CONTROLLER Acts like an object and proxies to the modelproperty. // In route class (this is the default behavior) setupController: function(controller, model) { controller.set('model', model); } // Object Controller App.ConferenceController = Ember.ObjectController.extend({ isEven: function() { return this.get('name').length % 2 === 0; }.property('name') }); isEvencalls this.get('name')which proxies to this.get('model.name')
  • 29. ARRAY CONTROLLER Acts like an array, but actually performs on the methods on the modelproperty. App.ConferencesController = Ember.ArrayController.extend({ sortProperties: ['title'] }); // conferences template {{#each conf in controller}} <div> <h1>{{conf.title}}</h1> </div> {{/each}} Looping over controllerin a template is actually looping over the modelproperty*
  • 30. VIEWS
  • 31. Views are primarily used to handle browser events. Since many application actions can be handled with the action helper and controller methods, you'll often not define views.
  • 32. UTILIZE BROWSER EVENTS App.ConferenceView = App.View.extend({ click: function(e) { alert('Click event was handled'); } });
  • 33. SETTING VIEWS TAG In the DOM, your templates are wrapped by a divwith a special id that Ember knows about. App.ConferenceView = Ember.View.extend({ tagName: 'section', }); The element wrapping the template will now be a section
  • 34. HELPERS
  • 35. REUSABLE TEMPLATE FUNCTIONS Ember.Handlebars.helper('capitalize', function(str) { return str[0].toUpperCase() + str.slice(1); }); And use the helpers in handlebars templates <h1>{{title}}</h1> <p>by {{capitalize firstName}} {{capitalize lastName}}</p>
  • 36. QUESTIONS? @joeytrapp github.com/joeytrapp @loadsys github.com/loadsys