ember.js - Ember.js 中的二维表

Question

我们正在通过构建一些“玩具应用程序”来评估 Ember.js(相对于 Angular)的复杂应用程序。其中之一是在表格中呈现数据。

我已经浏览了无数的 SO 帖子、Ember 网站和其他网站，但找不到让它发挥作用的关键。最接近的例子位于 xeqtit还有这个fiddle .

完全卡住了。

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

问题陈述

为了简化问题:想象一个路由器列表，每个路由器可以有可变数量的接口(interface)，这些接口(interface)有地址、状态等。

决赛 table 如下所示:

__________________________________________________
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 从数据库中检索的。它用机器对象填充 Controller 的“内容”，但尚未填充接口(interface)的详细信息: 获取:函数() { 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 中)，内容列表中的每台计算机都会被轮询以获取有关其接口(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) );
                })
            });
        }
    }
});

Answer 1

有两种可行的解决方案。

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

使用 jQuery 插件会更加复杂，因为它不直接链接到 ember 渲染过程。