Question

我是emberjs的新手，我想在我的车把emberjs视图中实现hansontable，我的视图代码如下：

<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车把模板

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

我可以用＆＃34; didInsert＆＃34;视图对象？

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

P.S。操作码上的ID也应为#spread-sheet而不是#spread_sheet

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

1 个答案: