mardi 2 février 2016

Link tag generated on server causes page reload in ember app when clicked

I have one situation in my Ember.js app where JSON for a Highcharts chart is generated by the server. In the chart there are links to pages in the ember app generated for the various labels. The browser behavior on these link is different that links generated from within the Ember app in that the links generated on the server appear to cause a complete page reload (unlike the normal behavior for a ember link). I have tried both absolute and relative paths.

This reminds me of that common, pre-Javascript framework problem where if a DOM fragment where added via AJAX, event listeners would not be properly applied.

Is it possible to create a link server-side that behaves as if it were an Ember generated link? I have flexibility to modify the <a> tags the server generates as needed.

Example JSON response from the server looks something like this:

{
  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 then renders as a label on a pie chart. The equivalent in the ember template would look like:

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

Which, of course, works normally.

Aucun commentaire:

Enregistrer un commentaire