Ember And Masonry

Simple example

by mgrassotti

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.js"></script>
<script src="http://masonry.desandro.com/js/box-maker.js"></script>
<script src="http://cloud.github.com/downloads/jzajpt/ember-bootstrap/ember-bootstrap-0.0.1.js"></script>
<!doctype html>
<html lang="en">
<head>
  <title>Ember and Masonry</title>
  <link rel="stylesheet" href="http://demo.redroverhq.com/stylesheets/bootstrap.css">
</head>
<body>

    
<script type='text/x-handlebars' data-template-name='item'>
    {{view.content.text}}
</script>
    
<script type="text/x-handlebars" data-template-name="application">
    <h1>EMBER + MASONRY</h1>
    <button {{action prependBox}}>+ prepend</button>
    <button {{action appendBox}}>+ append</button>
    <hr/>
    {{outlet}}
</script>
    
</body>
</html>

CSS

.hidden { display: none; }

/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/**** Demos ****/

.masonry-container {
  background: #EEE;
  padding: 10px;
  margin: 20px;
  border-radius: 5px;
  clear: both;
}

.box {
  margin: 5px;
  padding: 5px;
  background: pink;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.box img {
  display: block;
  width: 100%;
}

.col1 { width: 80px; }
.col1 img { max-width: 80px; }

CoffeeScript

App = Em.Application.create(
  ready: ->
    App.router.send('appendBox') for x in [0..2]
)
@App = App

App.AddButtons = Ember.View.extend
  templateName: "add-buttons"  

App.boxMaker = Em.Object.create
  lorem: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu interdum odio. Cras lobortis mauris vitae tellus consectetur sit amet cursus ipsum vestibulum. Duis facilisis sodales tristique. Vivamus aliquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Donec gravida faucibus magna, nec laoreet nibh placerat et. Cras magna lorem, faucibus vitae rhoncus ac, tincidunt vel velit. Mauris aliquam, risus vel sodales laoreet, mi nulla faucibus nunc, eu tincidunt nisi leo sed orci. Curabitur sagittis libero eu augue luctus ullamcorper.".split(".")
  
  randoLoremText: ->
    lorem = @get('lorem')
    loremText = ""
    sentences = Math.random() * 5
    j = 0

    while j < sentences
      whichSentence = Math.floor(Math.random() * lorem.length - 1 )
      loremText += lorem[whichSentence] + ". "
      j++
    loremText
    
    
App.ApplicationController = Em.Controller.extend()
App.ItemsController = Ember.ArrayController.extend
    content: []
    contentDidChange: ->
      console.log "content changed - it is now", @get('content')

    
App.ApplicationView = Em.View.extend(templateName: "application")

App.ItemView = Ember.View.extend
    classNames: ['box col1']
    templateName: "item"
    didInsertElement: ->
        console.log 'Inserted view App.Item for ' + this.getPath('content.text')
        @get('parentView').childDidInsertElement()


App.ItemsView = Ember.CollectionView.extend
    classNames: ['masonry-container clearfix']
    itemViewClass: "App.ItemView"
    contentBinding: "controller"

    childDidInsertElement: ->
      if @get('state') == "inDOM"
        Ember.run.once(this, this.reloadMasonry)
        
    didInsertElement: ->
        console.log "didInsertElement content: ", this.get('content')
   ...