2 dimensional table in Ember.js - ember.js

Question

We're evaluating Ember.js (against Angular) for a complex app by building a few "toy apps". One of them is to present data in a table.
I've been through countless SO postings, the Ember Website, and other sites but can't quite find the key to making it work. The closest examples were at xeqtit and this fiddle.
Quite stuck.
Any pointers to how to set this up? Been reading web postings for days just don't see the answer out there...
The Problem Statement
To simplify the problem: imagine a list of routers, each router can have a variable number of interfaces, those interfaces have an address, status, etc.
The final table would look like:
__________________________________________________
Machine | Interfaces
rt1.rp.ps.com | UP | UP | UP | NG | UP | UP | NG |
rt2.rp.ps.com | UP | UP | |
rt3.rp.ps.com | UP | UP | UP | |
rt4.rp.ps.com | UP | UP | UP | NG | UP | UP | NG |
rt5.rp.ps.com | UP | UP | UP | NG | |
--------------------------------------------------
Note the variable number of columns.
The Objects:
App.Machine = Ember.Object.extend(
{
nickname: '',
address: '',
ifaces: []
});
App.Interface = Ember.Object.extend(
{
num: '',
status: '',
address: ''
});
The Markup
<script type="text/x-handlebars" data-template-name="machinelist">
<p>List of Machines</p>
<table>
{{#each App.MachinelistController }}
<tr>
<td>{{nickname}}</td>
<td>{{address}}</td>
<td>
<table>
{{#each p in App.MachinelistController.getInterfaces}}
<tr><td>{{p}}</td></tr>
{{/each}}
</table>
</td>
</tr>
{{/each}}
</table>
</script>
The Controller
The Controller first reads a database to get a list of machines and their addresses. It then queries each machine to fetch the list of interfaces. [I've simplified the code to show the core of the issue ... excuse any typos]
App.MachinelistController = Ember.ArrayController.create(
{
content: [],
getInterfaces: function(x, y, z)
{
// This didn't work
return this.getPath('interfaces.status');
}.property('#each.read'),
polling: false,
machinePollTime: 5000,
detailPollTime: 3000,
The list of machines is retrieved from a database via PHP. It populates the 'content' of the Controller with Machine objects, but no details on the interfaces are filled in yet:
fetch: function()
{
console.log('machine fetch');
var self = this;
$.get("be/getDVStorList.php", function(data, textStatus)
{
self.set('content', []);
var statusReport = jQuery.parseJSON(data);
statusReport.machineList.forEach(function(v)
{
var machine = App.Machine.create(
{
nickname: v['machineName'],
address: v['machineIpAddr']
});
self.pushObject( machine );
})
});
if (self.polling)
setTimeout( function() { self.fetch(); }, self.machinePollTime);
return this;
},
In a separate polling loop (still in the ArrayController), each machine in the content list is polled to get the info about its interfaces:
fetchDetails: function ()
{
console.log("fetch details");
var self = this;
self.forEach(function(item, index, self)
{
console.log(item.get('address'));
var addr = item.get('address');
var base = "http://"+ addr;
var slug = "/cgi-bin/DvStorGetStatus.cgi?Recording=1&Playback=1&Structured=1";
$.ajax(
{
url: base+slug,
timeout: 10000,
cache: false,
success: buildMachineCallback(addr),
});
});
if (self.polling)
setTimeout( function () { self.fetchDetails(); }, self.detailPollTime);
return true;
function buildMachineCallback(addr)
{
return function(data, textStatus, jqXHR) { updateDetailsCallback(data, textStatus, jqXHR, addr); };
};
This function is called when the poll to each machine returns. It adds the 'interfaces' into the data structure:
// Update *data structure* based on return values in XML
function updateDetailsCallback(data, textStatus, jqXHR, addr)
{
// might be more than one with this address
var theMachines = self.filterProperty('address')
var interfaceList = $(data).find('Interface');
var interfaces = [];
$(playInterfaceerList).each(function()
{
var anInterface = App.Interface.create();
var num = $(this).find('InterfaceNum').text();
anInterface.set('num', num);
anInterface.set('status', $(this).find('InterfaceStatus').text());
interfaces[num-1] = anInterface;
})
// update all machines sharing this IP address
theMachines.forEach(function (m, idx, tm)
{
tm[idx].set('alias', $(data).find('Generic').find('Alias').text());
tm[idx].set('health', $(data).find('Generic').find('SystemHealth').text());
interfaces.forEach(function(p)
{
tm[idx].get('ifaces').pushObject( App.Interface.create(p) );
})
});
}
}
});

Answer 1

There are two solutions that should works.
Ember-table, an Ember plugin: http://addepar.github.io/#/ember-table/overview
jQuery-datatable, a jQuery plugin: https://datatables.net/
Using the jQuery plugin will be more complicated because it is not directly linked to the ember render process.