Ember.js 和 Highcharts : how to render a graph only after slow-loading model data has been loaded?

Question

更新:我们找到了一个看起来非常优雅的解决方案。我已在底部添加了所有相关代码。

我们正在评估 Ember.js，以应对我们的主要产品(分析仪表板)即将进行的重大重写。我们产品的重点是使庞大的数据集易于管理，而我们实现这一目标的一种方法是使用图表。因此，我目前正在使用 Highcharts 和 Ember.js 进行测试。

我的问题是:处理用作图表源的加载缓慢的服务器端数据的最佳方法是什么？

也就是说:我应该在下面的代码中进行哪些更改，以确保 Highcharts 图表仅在它呈现的 JSON 数据从服务器返回之后才呈现？

目前，我在 Ember 中有以下路线:

App.Router.map ->
  @resource 'panel', ->
    @route 'gender'

App.Router.reopen
  location: 'history'
  rootUrl: '/'

在这种情况下，小组/性别路线应显示一个带有 Highcharts 图表的页面，显示研究小组的分布。

PanelRoute :

App.PanelRoute = Ember.Route.extend
  model: ->
    App.PanelMetric.find()

App.PanelMetric模型:(我在这里没有使用 Ember Data，因为我的 JSON 结构不符合 Ember Data 的约定)

App.PanelMetric = Ember.Object.extend()

App.PanelMetric.reopenClass
  find: ->
    $.getJSON('/panel_metrics.json?callback=?').then (response) ->
      App.PanelMetric.create(response)

PanelGenderController :

App.PanelGenderController = Ember.ObjectController.extend
  needs: 'panel'

panel/gender模板(使用 Emblem.js):

App.GraphView id=gender_graph contentBinding=controllers.panel.content

App.GraphView查看:

App.GraphView = Ember.View.extend
  tagName: 'div'
  classNames: [ 'highcharts' ]

  didInsertElement: ->
    App.GraphController.render('gender_graph', @content)

GraphController有一个render创建实际 Highcharts 图表的方法。

<小时/>

更新:如上所述，我们为此找到了一个(在我们看来)优雅的解决方案。这实际上相当明显:我们只是在 Handlebars 中使用 if/else 语句，这取决于 isLoaded Controller 的属性，显示“正在加载...”消息或实际图形。

我们设置isLoading最初为假。在路由器中，我们加载数据 $.getJson当数据从服务器加载后，我们设置 isLoaded至true在 Controller 上。此外，在路由器中，我们使用 deactivate回调设置isLoaded至false当浏览离开页面时。

已更新PanelGenderController :

App.PanelGenderController = Ember.ObjectController.extend
  isLoaded: false

  data: ( ->
    gender = @content.gender

    # Transform "gender" to something Highcharts understands, return an Array
  ).property('content')

  categories: ( ->
    gender = @content.gender

    # Transform "gender" to an Array of category names,
    # used for the x-axis of the graph
  ).property('content')

已更新PanelGenderRoute :

App.PanelGenderRoute = Ember.Route.extend
  setupController: (controller) ->
    $.getJSON('/panel_metrics.json?callback=?').then (response) ->
      controller.set('content', App.PanelMetric.create(response))
      controller.set('isLoaded', true)

  deactivate: ->
    @get('controller').set('isLoaded', false)

已更新PanelRoute :现在为空，使用 Ember 生成的路由。

已更新PanelMetric型号:

App.PanelMetric = Ember.Object.extend()

已更新GraphView查看:

App.GraphView = Ember.View.extend
  tagName: 'div'
  classNames: [ 'highcharts', 'app-graph' ]

  didInsertElement: ->
    App.GraphController.render(@elementId, @content, @categories)

已更新panel/gender模板:

if isLoaded
  App.GraphView id=gender contentBinding=data categoriesBinding=categories
else
  App.LoadingGraphView

Answer 1

不确定在提出问题时是否可用，但您可以定义一个 id 为 loading 的模板，Ember.js 将在模型数据加载之前显示它可供您使用

http://emberjs.com/guides/routing/loading-and-error-substates/