Ember Apply JSON to Template in JavaScript

66 Views Asked by At

I am using jQuery DataTable but this can apply to other scenarios as well. DataTable has a child row feature where you can use HTML in string form to render a child row when the parent row is expanded. The d in the sample is the JSON object representing the current row:

  format: function ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
            '</tr>'+
        '</table>';
    },

Instead of having the HTML in a string, I would like it to be contained in an Handlebars\HTMLBars template. At the time the row is expanded, I want to look up the template, provide the JSON object and get back the HTML.

What is available in Ember 2.0/1.13 to accomplish this?

This needs to happen dynamically as the parent template that contains the DataTable is already rendered and the child row template is dynamically generated when the row is expanded.

The data in the child row is read-only so I only need one-way binding.

0

There are 0 best solutions below