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

How do I run custom JavaScript on emberjs view?

本文关键字：运行 自定义 JavaScript 视图 emberjs      更新时间：2023-09-26

我是emberjs的新手，我想在我的手把emberjss视图中实现hanontable，我的视图代码在下面给出

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

目前，我通过在文档就绪函数上使用javascript将hanontable附加到#spread_sheetdiv，示例如下

    <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中实现它，但我不知道如何在handleba模板中添加它？当我尝试为barchart实现d3js时，我也有同样的问题？

我可以用视图对象的"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")
});

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

对于d3.js条形图，也是同样的概念

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

p.s.还有操作代码上的id，应该是#spread-sheet而不是#spread_sheet

相关文章：