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数据，因为我的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属性，显示“正在加载...”消息或实际图形。

我们最初将isLoading设为false。在路由器中，我们使用$.getJson加载数据，当数据从服务器加载时，我们在控制器上将isLoaded设置为true。此外，在路由器中，我们使用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/

Ember.js和Highcharts：如何在加载缓慢加载的模型数据后才渲染图形？

1 个答案: