如何在emberjs视图上运行自定义JavaScript？

我是emberjs新手，我想在我的handlebar emberjs视图中实现hansontable，我的视图代码如下所示

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

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

目前，我正在使用javascript on document ready函数将hansontable附加到#spread_sheet div，下面给出了一个示例

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

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

$（文档）.ready（函数（）{
风险值数据=[“”]，资产负债表=$（“资产负债表”）；
var validateDate=/^[0-9]{2}-[0-9]{2}-[0-9]{4}$//；///mm dd yyyy
可手持的电子表格({
autoWrapCol：是的，
autoWrapRow：是的，
栏目：[
{数据：0}，
{data:1，validator:validateDate}，
{数据：2}，
{数据：3}，
{数据：4}，
{data:5，validator:validateDate}，
{数据：6}，
{data:7，validator:validateDate}，
{数据：8}，
{数据：9}，
{数据：10}，
{数据：11}，
{数据：12}，
{数据：13}，
{数据：14}
],
冷宽：窗。内宽*.12，
上下文菜单：正确，
currentRowClassName:“选定的行”，
数据：数据，
固定柱长度：1，
高度：window.innerHeight-32，
这是真的，
是的，
minSpareCols:2，
分钟：80，
外部单击取消选择：false，
persistentState:true，
行标题：对，
拉伸：“最后”，
宽度：window.innerWidth
}); ...

但是它不适用于emberjs把手模板

我想在emberjs中实现它，但我不知道如何在handlebar模板中添加它？ 当我尝试为条形图实现d3js时，我感觉到了同样的问题

---

是否可以使用view对象的“didInsert”执行此操作？

是的，可以基于

didInsertElement

事件执行此操作

例如

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

同样的概念也适用于

d3.js

条形图

p、 操作代码上的id也应为

#电子表格

而不是

#电子表格