3

いくつかの「おもちゃのアプリ」を構築することにより、複雑なアプリの Ember.js (Angular に対して) を評価しています。それらの 1 つは、テーブルにデータを表示することです。

私は無数の SO 投稿、Ember Web サイト、およびその他のサイトを調べてきましたが、それを機能させるための鍵を見つけることができません。最も近い例はxeqtitと this 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 を介してデータベースから取得されます。Controller の「コンテンツ」に Machine オブジェクトを取り込みますが、インターフェイスの詳細はまだ入力されていません。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) );
                })
            });
        }
    }
});
4

1 に答える 1