emberjs보기에서 사용자 정의 JavaScript를 실행하려면 어떻게해야합니까? 내가 emberjs에 새로운 오전

Question

, 내 핸들 emberjs보기에 hansontable을 구현하려는, 내보기 코드

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

현재 내가 문서 준비 기능에 자바 스크립트를 사용하여 DIV를 #spread_sheet하는 hansontable 부착 아래에 주어진 예를 주어진

<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 
    }); ... 

아래에 있지만 emberjs 핸들 템플릿

내가 emberjs에서 그것을 구현하려는하지만 난 핸들 템플릿이를 추가하는 방법을 잘 모릅니다과 함께 일을 해달라고? barchart에 대해 d3js를 구현할 때 동일한 문제가 발생 했습니까?

뷰 객체의 "didInsert"로 할 수 있습니까?

Answer 1

예, didInsertElement 이벤트를 기반으로 수행 할 수 있습니다.

예하는 d3.js 바 차트

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

동일한 개념

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

추신 또한 운영 코드의 ID는 #spread-sheet이 아니어야합니다. #spread_sheet