How do I run custom JavaScript on emberjs view?

Question

i am new in emberjs, i want to implement hansontable in my handlebar emberjs view, my view code is given below

<script type="text/x-handlebars" data-template-name="clex/sc">
    <div id="spread-sheet" style="width: 100%;"></div>
</script>

currently i attaching hansontable to #spread_sheet div by using javascript on document ready function, example given below

    <script>$(document).ready(function() {

    var data = [[""]], spread_sheet = $("#spread_sheet");

    var validateDate = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/; // mm-dd-yyyy

    spread_sheet.handsontable({
        autoWrapCol: true,
        autoWrapRow: true,
        columns: [
            {data: 0},
            {data: 1, validator: validateDate},
            {data: 2},
            {data: 3},
            {data: 4},
            {data: 5, validator: validateDate},
            {data: 6},
            {data: 7, validator: validateDate},
            {data: 8},
            {data: 9},
            {data: 10},
            {data: 11},
            {data: 12},
            {data: 13},
            {data: 14}
        ],
        colWidths: window.innerWidth*.12,
        contextMenu: true,
        currentRowClassName: "row_selected",
        data: data,
        fixedColumnsLeft: 1,
        height: window.innerHeight - 32,
        manualColumnMove: true,
        manualColumnResize: true,
        minSpareCols: 2,
        minSpareRows: 80,
        outsideClickDeselects: false,
        persistentState: true,
        rowHeaders: true,
        stretchH: "last",
        width: window.innerWidth
    }); ...

but it dont work with emberjs handlebar template

i want to implement it in emberjs but i dont know how to add this in handlebar template ? i feel same problem when i tried to implement d3js for barchart ?

can i do it with "didInsert" of view object ?

Answer 1

Yes, it can be done based on the didInsertElement event.

Example,

App = Ember.Application.create();

App.IndexView = Ember.View.extend({
  createGrid:function(){

    var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
];

this.$('#spread-sheet').handsontable({
  data: data,
  minSpareRows: 1,
  colHeaders: true,
  contextMenu: true
});

  }.on("didInsertElement")
});

http://emberjs.jsbin.com/duzebeku/1/edit

also same concept for a d3.js bar chart,

http://emberjs.jsbin.com/liteqevu/1/edit

p.s. also the id on the op code, should be #spread-sheet not #spread_sheet