javascript - 如何在 emberjs View 上运行自定义 JavaScript？

Question

我是 emberjs 新手，我想在我的 Handlebars emberjs View 中实现 hansontable，我的 View 代码如下

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

目前我通过在文档准备功能上使用 javascript 将 hansontable 附加到 #spread_sheet div，示例如下

    <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 Handlebars 模板

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

我可以用 View 对象的“didInsert”来做到这一点吗？

Answer 1

是的，可以基于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")
});

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

对于 d3.js 条形图也有相同的概念，

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

附:还有操作码上的 id，应该是 #spread-sheet 而不是 #spread_sheet