How to use salvattore in emberjs

Question

I am trying to get salvattore to work in my embercli project. Currently I've followed the example at salvattore.com and it sort of works but puts '3 .column.size-1of3' on the grid div rather than creating column divs in the grid.

example html

<div id="grid" data-columns="">  <!-- (inspector style) content: '3 .column.size-1of3';  -->
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
  <div>Item #20</div>
</div>

I think this is happening because Salvattore isn't being inited at the correct time so the DOM isn't ready for it. I've tried creating a view with a didInsertElement function but I don't know how to get the Salvattore namespace to rerun the grid function. Currently I get the error with the code below.

Build error:

ENOENT, no such file or directory '/Users/mikev/dev/derp-ember-app/tmp/tree_merger-tmp_dest_dir-YVY49mzP.tmp/salvattore.js'

index view:

import Ember from 'ember';
import salvattore from 'salvattore';

export default Ember.View.extend({
    didInsertElement: function(){
        salvattore.register_grid();
        salvattore.recreate_columns();
    }
});

Any insight to my problem would be greatly appreciated. Thanks

Answer 1

I'm not sure where you are placing it now in is the right spot, as that's not going to be application global. Try:

app/views/application.js

/* globals salvattore */
import Ember from 'ember';

export default Ember.View.extend({
  _myUiInit: function () {
    salvattore.register_grid();
    salvattore.recreate_columns();
  }.on('didInsertElement')
});

The import should look like:

Brocfile.js

app.import( 'vendor/salvattore/dist/salvattore.js' );

(and restart the ember server after)

Note: the above is untested (I don't use salvattore) but I use the exact same approach with Foundation, just the init function content is different.