Question

我的Ember.js应用程序中有一种情况，即服务器生成Highcharts图表的JSON。在图表中有指向为各种标签生成的ember app中的页面的链接。这些链接上的浏览器行为与Ember应用程序中生成的链接不同，因为服务器上生成的链接似乎会导致完整的页面重新加载（与ember链接的正常行为不同）。我尝试了绝对路径和相对路径。

这让我想起了常见的，Javascript之前的框架问题，如果一个DOM片段通过AJAX添加，事件监听器将无法正确应用。

是否可以创建一个链接服务器端，其行为就像是Ember生成的链接一样？我可以灵活地修改服务器根据需要生成的<a>标记。

来自服务器的示例JSON响应如下所示：

{
  pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
      enabled: true,
      format: "<a href=\"/valid-ember-path/{point.id}\">{point.name}</a>: {point.percentage:.1f}%",
      useHTML: true
    }
  }
}

Highcharts然后在饼图上呈现为标签。 ember模板中的等价物如下所示：

{{#link-to 'valid-ember-path' obj.id}}{{obj.name}}{{/link-to}}

当然，这是正常的。

Answer 1

锚标记在这里不起作用。内部链接仅适用于link-to和/ action，因为Ember会在其上添加ID并在内存中跟踪它们。

我讨厌建议这个作为答案，但我已经调查了它，并没有看到另一种方式。我认为你需要使用jquery绑定到click事件。

以下是使用ember-highcharts的示例：

无论您在何处定义图表数据：

    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          format: `<a data-chart-path=\"/valid-route\">{point.name}</a>: {point.percentage:.1f}%`,
          useHTML: true
        }
      }
    }

还定义一个可以传递到highcharts组件的动作：

  actions: {
    setupAnchors() {
      Ember.$('[data-chart-path]').on('click', (e) => {
        const path = Ember.$(e.target).data('chart-path');
        this.transitionToRoute(path);
      });
    }
  }

在您调用图表组件的模板中：

{{high-charts content=chartData chartOptions=chartOptions theme=theme callback=(action 'setupAnchors')}}

注意，当从DOM中删除图表时，您还需要删除click事件绑定。

单击时，在服务器上生成的链接标记会导致在ember应用程序中重新加载页面

1 个答案: