我们正在通过构建一些“玩具应用”来评估Ember.js(针对Angular)针对一个复杂的应用。其中之一是在表中显示数据。
我曾经浏览过无数的SO帖子，Ember网站和其他网站，但找不到使它正常工作的关键。最接近的示例是xeqtit和此fiddle。
完全卡住了。
关于如何设置的任何指示？几天来一直在阅读网络帖子，只是看不到答案...
问题陈述
为了简化问题:设想一个路由器列表，每个路由器可以具有可变数量的接口(interface)，这些接口(interface)具有地址，状态等。
决赛桌看起来像:
__________________________________________________
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 | |
--------------------------------------------------
注意可变的列数。
对象:
App.Machine = Ember.Object.extend(
{
nickname: '',
address: '',
ifaces: []
});
App.Interface = Ember.Object.extend(
{
num: '',
status: '',
address: ''
});
标记
<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>
Controller
Controller 首先读取数据库以获取机器及其地址的列表。然后，它查询每台计算机以获取接口(interface)列表。 [我简化了代码以显示问题的核心……对不起任何错别字]
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,
机器列表是通过PHP从数据库中检索的。它使用Machine对象填充Controller的“内容”，但尚未填写接口(interface)的详细信息:
获取: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;
},
在一个单独的轮询循环中(仍在ArrayController中)，对内容列表中的每台计算机进行轮询以获取有关其接口(interface)的信息:
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); };
};
当对每台计算机的轮询返回时，将调用此函数。它将“接口(interface)”添加到数据结构中:
// 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) );
})
});
}
}
});
最佳答案
有两个解决方案应该起作用。
使用jQuery插件会更加复杂，因为它没有直接链接到ember渲染过程。
关于ember.js - Ember.js中的2维表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13984157/