Ember.js中的二维表

Question

我们正在通过构建一些“玩具应用程序”来评估Ember.js（针对Angular）的复杂应用程序。其中之一是在表格中显示数据。

我经历了无数的SO帖子，Ember网站和其他网站，但却无法找到使其成功的关键。最接近的示例位于xeqtit和fiddle。

相当困难。

有关如何设置的任何指示？几天来一直在阅读网络帖子，但是没有看到那里的答案...

问题陈述

简化问题：想象一下路由器列表，每个路由器可以有可变数量的接口，这些接口有地址，状态等。

决赛桌如下：

__________________________________________________
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首先读取数据库以获取机器及其地址列表。然后它查询每台机器以获取接口列表。 [我已经简化了代码以显示问题的核心...原谅任何错别字]

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的“内容”，但尚未填充接口的详细信息：         获取：function（）         {             console.log（'机器获取'）;             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中），轮询内容列表中的每台机器以获取有关其接口的信息：

    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); };
        };

当对每台机器的轮询返回时，将调用此函数。它将'接口'添加到数据结构中：

        // 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

有两种解决方案可行。

• Ember-table，一个Ember插件：http://addepar.github.io/#/ember-table/overview
• jQuery-datatable，一个jQuery插件：https://datatables.net/

使用jQuery插件会更复杂，因为它没有直接链接到余烬渲染过程。