How to include gridster.js into Ember application?

Question

I try to include a gridster script to use in my Ember application. There was a ember-gridster component availible on github but isn't downloadable anymore.

Now I'm trying to include the JS and CSS file in a view.

What is the best way/method to use Gridster into a ember application?

The result where I am looking for/startup of the grid is like this: http://jsfiddle.net/h9f63/22/

Could somebody explain how to reach this result in ember.

export default Ember.View.extend({  
  didInsertElement:
  var gridster;
  $(function(){
    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        max_size: [4, 4],
        min_size: [1, 1]
      }
    }).data('gridster');
  });
});

Answer 1

I believe Ember is moving towards components and away from the views, so here is a simple integration of gridster into Ember producing a gridster component:

App.XGridsterComponent = Ember.Component.extend({
  tagname: "",

  didInsertElement: function(){
    Ember.$(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        max_size: [4, 4],
        min_size: [1, 1]
      }
    }).data('gridster');
  }
});

Working on jsbin here

Also, to make this even more useful, you probably want to read up on the {{ yield }} usage inside components here