ember.js - ember 中可重用对象的架构

Question

我正在使用 ember 构建管理仪表板。我想创建一个可重用的图表对象，我可以在整个应用程序中拥有多个实例。图表对象应该有一个模板，该模板由一些标记和一个 Canvas 元素组成，在插入 DOM 后我需要其 id 以附加实际图表 (chart.js)。我尝试了几种方法，但我似乎无法找出正确的架构来做到这一点。

ember 中实现上述目标的正确架构是什么？

谢谢!

Answer 1

Ember.Component 是你的 friend

正如@raulbrito 已经提到的，如果您想要在 ember 中重用组件，最好的方法确实是使用新的 Ember.Component这在很大程度上基于 new w3 draft for web components并因此成为 future 的证明。

我试图举一个简单的例子来说明如何实现这一点。
给定一个简单的 route model钩子(Hook)返回一些静态数据:

索引路线

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return Ember.Object.create({
      modelOne: data,
      modelTwo: data2
    });
  }
});

data和 data2只是为简单起见全局定义的静态对象(正如您将看到的 in the demo )，但这也可能是来自后端或固定装置等的数据。

索引模板

然后我们在模板中插入我们的图表组件和行 {{line-chart data=model.modelOne}}如您所见，我们还设置了 data索引模型的属性 model.modelOne或 model.modelTwo :

<script type="text/x-handlebars" id="index">
  <h2>Chart one</h2>
  {{line-chart data=model.modelOne}}

  <h2>Chart two</h2>
  {{line-chart data=model.modelTwo}}
</script>

组件模板

我们的组件模板看起来相当简单，因为它将呈现一个简单的 canvas元素，但它可以根据需要尽可能复杂，关于如何使用 Ember.Component另请参阅 docs :

<script type="text/x-handlebars" id="components/line-chart">
</script>

组件子类

App.LineChartComponent = Ember.Component.extend({
  tagName: 'canvas',
  attributeBindings: ['width', 'height'],
  width: '480',
  height: '360',
  data: null,
  didInsertElement: function() {
    var ctx = this.get('element').getContext("2d");
    var myNewChart = new Chart(ctx).Line(this.get('data'));
  }
});

注意命名在这里很重要，Ember 知道哪个子类根据其名称为组件提供动力。例如，如果您有一个名为 line-chart 的组件。 ，您将创建一个名为 App.LineChartComponent 的子类.如果您的组件被称为 bar-chart-simple ，类名将是 App.BarChartSimpleComponent等等。 Ember 将使用组件的驼峰名称查找一个类，后跟 Component .

所以，因为 Ember.Component延伸自 Ember.View我们可以定义各种属性 Ember.View支持 tagName .在我们的例子中，我们使用 canvas因为这就是 chart.js需要工作。如您所见，我们还定义了一些 attributeBindings控制 width和 height的 canvas从 Ember 内部。该组件还有一个 data属性(可以任意命名)定义，我们稍后将模型数据设置在从 IndexRoute 返回的模板中。 model钩。最后在你的 didInsertElement我们的组件的钩子(Hook)我们初始化图表传递 this.get('data')新创建的数据对象 Chart.js类(class)。

var ctx = this.get('element').getContext("2d");
var myNewChart = new Chart(ctx).Line(this.get('data'));

最后但并非最不重要的一点是，请参阅此处查看 working example以上解释的。

希望能帮助到你。

更新以响应您的最后评论

我试图模拟 model 分辨率的延迟。钩子(Hook)来模拟来自后端的响应，您可以看到模板渲染正在等待 model答应先解决。基本上我所做的是使用 Ember.run.later有 2000 毫秒的延迟，一旦超时就会解决 promise :

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return new Ember.RSVP.Promise(function(resolve) {
      Ember.run.later(function() {
        var m = Ember.Object.create({
          modelOne: data,
          modelTwo: data2
        });
        resolve(m);
      }, 2000);
    });
  }
});

只是为了好玩，我还添加了 LoadingRoute在 promise 解析等待数据时显示微调器， LoadingRoute是 ember 的一个记录较少的功能，您可以在此处阅读更多信息: https://gist.github.com/machty/5647589在我如何在转换期间使用 Promise 放置(全局)加载微调器？

请在此处查看更新的示例: http://jsbin.com/odosoy/145/edit

更新以回应@SamSelikoff 的评论

至于上面提到的 LoadingRoute @SamSelikoff 指出它现在已正式记录: http://emberjs.com/guides/routing/defining-your-routes/#toc_initial-routes