Emberjs

Building an Ember App with Ruby on Rails Part 1

Transcript

1. Emberjs part one http://emberjs.com
2. What do we need? • gem 'ember-rails' • gem 'bower-rails' • gem 'emblem-rails' • http://www.ember-cli.com/
3. Bower - js package manager • Using with RoR ◦ Bowerfile ◦ initializer ◦ install assets rake bower:install (!) • Package manager ◦ http://bower.io
4. Getting started • Application structure • Application root element EmberApp = Ember.Application.create({ rootElement: '#ember-application-holder' })
5. Router • Application route • Index route • Routes extend EmberApp.Router.map -> @resource 'page', path: '/', -> @resource 'users', path: '/users', -> @route 'show', path: ':id'
6. Naming conventions • Router: ◦ AppName.PageRoute ◦ page_route.js.coffee • Controller: ◦ AppName.PageController ◦ page_controller.js.coffee • View: ◦ AppName.PageView ◦ page_view.js.coffee • Template: page.emblem
7. Outlets • Application template {{outlet}} • {{outlet name}} Render template • @render 'users', {into: 'application'} • @render 'users', {into: 'application', outlet: 'modal'} • @render 'users', {into: 'page', outlet: 'page', controller: controller}
8. Model • Router set model model: (params) -> AppName.ModelName.find(params.id) • Class methods AppName.ModelName.reopenClass find: (id = null) -> ...
9. View • actions and events • classNames ◦ classNameBinding • tagName • template ◦ templateName ◦ template : Ember.Handlebars.compile('content')
10. • Router set controller setupController: (controller, model) -> controller.set('varName', 'value') • Ember.ObjectController • Ember.ArrayController Controller
11. • binding • collection ◦ each controller.model div {{name}} ◦ each controller.model {{component-name nameInComponent=name}} ◦ {{view Ember.CollectionView contentBinding='data' itemViewClass='viewName'}} Templates
12. Components • Template component ◦ /templates/components/component-name.emblem • Ember Component ◦ /components/component-name.js.coffee
13. Computed properties • Depends on id and name isFirst: (-> @get('id') == 1 && (@get('id') == 'Artur') ).property('id', 'name') • Ember.computed.not('isFirst')
14. Thanks for attention Artur Kremens artur.kremens@netguru.pl +48507224476