Ember integrating into existing sites 

James Croft @james_croft matchingnotes.com 

MINIFIED I work at 

No content

Progressive enhancement JS web apps 

No content

No content

The content needs to be indexable 

No content



No content

No content

No content

No content

No content

No content

Computed properties Run loop Bindings Observers 

1 {{track-player track=controllers.track}} 1 App.TrackPlayerComponent = Ember.Component.extend 2 setupPlayer: ( -> 3 player = new YT.Player @get('element') 4 @set('player', player) 5 ).on('didInsertElement') 6 7 playVideo: ( -> 8 @get('player').loadVideoById @get('track.videoId') 9 ).observes('track.videoId') 10 11 App.TrackController = Ember.ObjectController.extend() 

1 App.ApplicationRoute = Ember.Route.extend 2 actions: 3 playTrack: (track) -> 4 @controllerFor('track').set('content', track) 5 1

2 {{#each track in controllers.tracks}} 3
• 4 ▶ 5 {{track.title}} 6
7 {{/each}} 8



1

2 ▶ 3 Andhim - Reeves 4



1 $('body').on 'click', 'a.play', (e) -> 2 $link = $(this) 3 artist = $link.data('artist') 4 title = $link.data('title') 5 videoId = # Search YouTube for the video 6 7 track = Ember.Object.create 8 artist: artist 9 title: title 10 videoId: videoId 11 12 # Get the track into the application 1

2 ▶ 3 Andhim - Reeves 4



1 $('body').on 'click', 'a.play', (e) -> 2 $link = $(this) 3 artist = $link.data('artist') 4 title = $link.data('title') 5 videoId = # Search YouTube for the video 6 7 track = Ember.Object.create 8 artist: artist 9 title: title 10 videoId: videoId 11 12 trackController = App.__container__.lookup('controller:track') 13 trackController.set('content', track) 1

2 ▶ 3 Andhim - Reeves 4



__container__ 

No content

1 2 3 4 5 6 $('body').on 'click', 'a.play', (e) -> 7 $link = $(this) 8 artist = $link.data('artist') 9 title = $link.data('title') 10 videoId = # Search YouTube for the video 11 12 track = Ember.Object.create 13 artist: artist 14 title: title 15 videoId: videoId 16 17 

1 App.initializer 2 name: "setup-play-link-handler", 3 initialize: (container, application) -> 4 trackController = container.lookup('controller:track') 5 6 $('body').on 'click', 'a.play', (e) -> 7 $link = $(this) 8 artist = $link.data('artist') 9 title = $link.data('title') 10 videoId = # Search YouTube for the video 11 12 track = Ember.Object.create 13 artist: artist 14 title: title 15 videoId: videoId 16 17 trackController.set('content', track) 

No content

No content

pjax 

TURBOLINKS? um, did you just say? 

No content

No content

No content

No content

1 view = App.SimilarTracksView.create 2 controller: App.SimilarTracksController.create() 3 4 5 view.appendTo('.similar-tracks') 

No content

1 view = App.SimilarTracksView.create 2 controller: App.SimilarTracksController.create() 3 container: App.__container__ 4 5 view.appendTo('.similar-tracks') 

_________container_________ 

1 view = App.__container__.lookup('view:recommended-list') 2 view.set('controller', App.SimilarTracksController.create()) 3 4 view.replaceIn('.similar-tracks') 

•Server rendered HTML •Enhanced using Ember •pjax so that the Ember app is long lived 

•Ember, not just for single page apps •Just use the bits that you need 

Questions? 

James Croft @james_croft matchingnotes.com