Backbone.Stickit Example

example.md

MOP view template in HAML

%script#mop-template{type: 'text/html'}
  .container-fluid
    .section
      .row
        .col-md-12.section-name
          %label Reason
      .row
        .col-md-12.section-edit
          .display.reason

    .section
      .row
        .col-md-12.section-name
          %label Customer Impacting
      .row
        .col-md-12.section-edit
          .display.impact

    .section.impact-customers
      .row
        .col-md-12.section-name
          %label Customer Impact Description
      .row
        .col-md-12.section-edit
          .display.impact_desc

    .section
      .row
        .col-md-12.section-name
          %label Procedure
      .row
        .col-md-12.section-edit
          .display.procedure

    .section
      .row
        .col-md-12.section-name
          %label Back Out Plan
      .row
        .col-md-12.section-edit
          .display.backout_plan

    .section
      .row
        .col-md-12.section-name
          %label Back Out Verification
      .row
        .col-md-12.section-edit
          .display.backout_verification

    .section
      .row
        .col-md-12.section-name
          %label Additional Notes
      .row
        .col-md-12.section-edit
          .display.notes

    .section.no-border
      .row
        .col-md-12.section-name
          .display.files

    .section.no-border
      .row
        .col-md-12.section-name
          .display.approvers

MOP Backbone View in CoffeeScript

class App.Views.Mop extends Backbone.View
  template: () -> $('#mop-template').html()

  className: 'mop'

  bindings:
    '.name'   : 'name'
    '.reason' : 'reason'

    '.tags':
      observe: ['tag_ids', 'tags']
      onGet: () -> @model.tags.toString()

    '.impact':
      observe: 'impact'
      onGet:   (v) -> App.displayBool v

    '.impact_desc':
      observe:      'impact_desc'
      updateMethod: 'html'

    '.procedure':
      observe:      'procedure'
      updateMethod: 'html'

    '.backout_plan':
      observe:      'backout_plan'
      updateMethod: 'html'

    '.backout_verification':
      observe:      'backout_verification'
      updateMethod: 'html'

    '.notes':
      observe:      'notes'
      updateMethod: 'html'

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

    this._setupApproversView()
    this._setupFilesView()
    this._checkHideSections()

    return this

  _setupFilesView: () ->
    @filesView = new App.Views.Files
      model: @model.files
      el:    this.$('.files')

    @filesView.render()

    return

  _setupApproversView: () ->
    @approversView = new App.Views.Approvers
      model: @model.approvers
      el:    this.$('.approvers')

    @approversView.render()

    return

  _checkHideSections: () ->
    if @model.get('notes') is ''
      this.$('.notes').parents('.section').hide()

    return