reProgram.js

Backbone... Evolved







Backbone 1.0

'.' notation


get 

user_action_item:
  state: 'in_progress'
  action_item: new Backbone.Model
    summary: 'ALL The Things!'

@get 'user_action_item.state' -> 'in_progress'
@get 'user_action_item.action_item.summary'-> 'ALL The Things!'


set





StickIt!

coach.js.coffee abbreviated 

NOVU.View.Dashboard.CoachPipTab = NOVU.View.Dashboard.PipTab.extend
  template: JST['backbone/templates/dashboard/pipTabs/coach']

  bindings:
    '.message': 'content'

  initialize: (options) ->
    @pip = options.pip
    @model = new NOVU.Model.Dashboard.CoachingMessage {user_skill: @pip.model}
    @render()
    return

  render: ->
    @$el.html @template()
    @stickit()
    @


coach.jst._ abbreviated 

.message

historyItem.js.coffee super-abbreviated 

bindings:
  '.summary': 'action_item.summary'
  '.date':
    observe: 'timestamp_at'
    onGet: (timestamp) ->
        moment(timestamp).format('dddd, MMMM Do')
  '.historyItemHeader, .status':
    attributes: [
      name: 'class'
      observe: 'value'
      onGet: 'determineValueBasedClass'
    ]
  '.historyItemHeader':
    observe: 'value'
    update: ($el, val) -> @expandForNullValues val

historyItem.js._ super-abbreviated 

.historyItemHeader
  .bar
    %span.status
    %span.date
    %span.printIcon.icon-printer
  %p.controller.icon-plus-2
.historyItemContent
  .question= I18n.t('dashboard.pip.checkin.prompt.completed')
  %h3.summary





Courier


Usage


 NOVU.View.Child
  events:
    'click childButton': 'feelGoodAboutSelf'

  spawnMessages:
    'click childButton': 'childButtonClicked'

  feelGoodAboutSelf: ->
    @drinkBeerz()
 NOVU.View.Parent
  onMessages:
    'child*': 'textFriend'

  passMessages:
    'childButtonClicked': 'grandChildButtonClicked'
 NOVU.View.GrandParent
  onMessages:
    'grandChildButtonClicked': 'postOnFacebook'





And Now, On To Our Code

We Was Doin It Wrong


Models vs Views

Not this:
NOVU.Model.Comment = Backbone.Model.extend
  initialize: ->
    @view = new NOVU.View.Comment({model: @})
Nor this:
NOVU.View.Comment = Backbone.View.extend
  initialize: ->
    @model.view = @
Instead this:
NOVU.View.Comments = Backbone.View.extend
  render: ->
    @collection.each (comment) =>
      commentView = new NOVU.View.Comment
        model: comment
      @$el.append commentView

An Example



  • Action Items Collection (x1)
    • Action Item (x14)
      • Asset Collection (x1)
        • Asset (x3)
          • View (x1)

Parallel Foundation


Comments (in theory): 
@comments = new NOVU.Collection.Comments()

@commentsView = new NOVU.View.Comments
  collection: @comments

Pips (for real): 
@pips = new NOVU.Collection.Dashboard.Pips()

@pipsView = new NOVU.View.Dashboard.Pips
  collection: @pips

$ =>
  $('#pipsTarget').replaceWith @pipsView.el

@pips.fetch



It's Over


Questions?






author: Johnathon Sanders 
location: i sit by the printer

reprogram.js

By Johnathon Sanders

Made with Slides.com

reprogram.js

  • 1,872

More from Johnathon Sanders