如何将 gridster.js 包含在 Ember 应用程序中

Question

我尝试包含一个网格脚本以在我的 Ember 应用程序中使用。github上有一个ember-gridster组件可用，但不再可下载。

现在我正在尝试将JS和CSS文件包含在视图中。

在余烬应用程序中使用 Gridster 的最佳方法/方法是什么？

我正在寻找/启动网格的结果是这样的：http://jsfiddle.net/h9f63/22/

有人可以解释如何在余烬中达到这个结果吗？

export default Ember.View.extend({  
  didInsertElement:
  var gridster;
  $(function(){
    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        max_size: [4, 4],
        min_size: [1, 1]
      }
    }).data('gridster');
  });
});

Answer 1

我相信 Ember

正在向组件移动并远离视图，所以这里是将 gridster 简单地集成到 Ember 中，生成一个 gridster 组件：

App.XGridsterComponent = Ember.Component.extend({
  tagname: "",
  didInsertElement: function(){
    Ember.$(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true,
        max_size: [4, 4],
        min_size: [1, 1]
      }
    }).data('gridster');
  }
});

在这里处理 jsbin

此外，为了使它更加有用，您可能希望在此处阅读组件内部{{ yield }}用法