Ember.ListView mixins - for changing height and width of Ember.ListView during runtime

ember-list-view.js.coffee

# This mixin can be used to extend a ListView class to adjust its width and height when resizing
# the browser. The dimensions of the ListView are synchronized with the width and height 
# of the parent element that contains the ListView.
#
# Although this mixin sets the width and height you still have to define these properties when 
# defining the ListView class.
#
# example:
#   App.ListView = Ember.ListView.extend ListView.ListViewMixin,
#     width: 100
#     height: 100
#     elementWidth: 112
#     rowHeight: 112
#     itemViewClass: Ember.ListItemView.extend
#       templateName: "row_item"
#
# For more info about Ember.ListView see: https://github.com/emberjs/list-view
#
ListView =
  ListViewMixin: Ember.Mixin.create
    didAdjustOnResize: (->
      $(window).resize(=>
        Ember.run(=>
          @adjustLayout()
        )
      )
    ).on('didInsertElement')

    adjustLayout: (->
      $parent = @$().parent()
      width = $parent.width()
      height = $parent.height()
      @setProperties
        width:  width
        height: height
    ).on('didInsertElement')

window.ListView = ListView