Más contenido relacionado Similar a A Better UJS for Rails (20) A Better UJS for Rails1. A Better UJS for Rails
Codemy.net
presents
@zacksiriby:
Monday, June 10, 13
6. And then I saw Turbolinks...
Monday, June 10, 13
10. Turbolinks Backbone / MV*
?
Something is
missing
Control / Complexity for Client
Less Ruby
Monday, June 10, 13
13. CH.calendar = Codemy.Helpers.Calendar =
dateOnly: (date_time) ->
moment(date_time).format('YYYY-MM-DD')
timeInISO: (date_time) ->
moment(date_time).format('YYYY-MM-DD HH:mm:ss Z')
timeInHour: (date_time) ->
moment(date_time).format('HH:mm A')
Monday, June 10, 13
14. class CommentsPresenter extends Transponder.Presenter
presenterName: 'comments'
modelName: 'comment'
index: ->
if @params.page
CH.infiniteLoader.loadNext
element: @element
response: @response
modelName: @modelName
putAt: 'prepend'
show: ->
$(@element).replaceWith(@response)
$(@element).trigger('codemy:services:highlight')
....
create: ->
$('#new_comment').replaceWith(@response)
$(".comment:last").effect('highlight', {}, 500)
destroy: ->
$(@element).fadeOut 300, ->
$(this).remove()
Monday, June 10, 13
15. • maps to your controller actions
• calls helper functions when needed
• trigger services
• modify the DOM as needed
Presenters
Monday, June 10, 13
17. class CommentsPresenter extends Transponder.Presenter
presenterName: 'comments'
modelName: 'comment'
index: ->
# your code for modifying the DOM
# listens for event ujs:comments:index
update: ->
# listens for even ujs:comments:update
...
• ujs:comments:index triggers index()
• ujs:comments:show triggers show()
• ujs:comments:edit triggers edit()
• ujs:comments:update triggers update()
• ujs:comments:create triggers create()
• ujs:comments:destroy triggers destroy()
Monday, June 10, 13
18. Ok so how do I trigger the
event?
Monday, June 10, 13
19. $('#comments').trigger("<%= j ujs_event_type %>", "<%= j
render 'comments' %>");
app/views/comments/index.js.erb
app/views/comments/update.js.erb
$('#comment_1').trigger("<%= j ujs_event_type %>", "<%= j
render @comment %>");
{
ujs:comments:update
{
controller_name:action_name
Monday, June 10, 13
20. class CommentsPresenter extends Transponder.Presenter
presenterName: 'comments'
modelName: 'comment'
index: ->
if @params.page
CH.infiniteLoader.loadNext
element: @element
response: @response
modelName: @modelName
putAt: 'prepend'
update: ->
$(@element).replaceWith(@response)
...
Monday, June 10, 13
21. Presenters Provide
• Better code reusability (Dryer)
• Cleaner
• Provides Structure
• Use what you already know!
• Logicless View in Rails
Monday, June 10, 13
26. <select class="submit_on_change">
<option value="drafting">drafting</option>
<option value="request_approval">
awaiting approval
</option>
</select>
$('body.courses.index').trigger('codemy:services:submit_on_change');
<select class="submit_on_change submit_on_change_active">
<option value="drafting">drafting</option>
<option value="request_approval">
awaiting approval
</option>
</select>
Monday, June 10, 13
27. Transponder.service_manifest = ->
$("body.questions,
body.apprentice.objectives.show,
body.mentor.owned_levels.show,
body.mentor.objectives.show,
body.mentor.posts,
body.posts.show").trigger 'codemy:services:live_preview'
$("body.questions,
body.mentor.posts").trigger 'codemy:services:tag_select'
$("body.questions,
body.apprentice,
body.mentor,
body.activities,
body.posts.show").trigger 'codemy:services:highlight'
Monday, June 10, 13
28. What Services Do
• Write once use everywhere (again Dryer code)
• Better Maintainability
• Makes sure it doesn’t run on a node that has that service
already running
• Makes it easier to manage all your code via manifest
Monday, June 10, 13
30. class BadgesPresenter extends Transponder.Presenter
nameSpace: "mentor"
presenterName: "badges"
modelName: "badge"
show: ->
$(@element).replaceWith(@response)
$(@element).trigger('codemy:services:poller')
$(@element).trigger('codemy:services:uploader')
update: ->
@show()
Monday, June 10, 13
38. # TODO:
• Clean up some APIs
• Add Documentation
• Video Screencasts
• More Generators
• Example Rails Project
Monday, June 10, 13