Question

我有以下聚合物元素，它根据pubnub消息绘制一个简单的图表。它适用于“实时”数据（.subscribe()）。但由于某种原因，当我使用执行完全相同回调的pubnub .history()方法时，图表不会更新。快速调试告诉我，图表元素（dom-repeat）在处理（$.append）历史数据时尚未呈现。我该如何解决这个问题？

聚合物模板：

<!-- Imports polymer -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- Defines element markup -->
<dom-module id="widget-horizon">
    <template>
        <strong id="widgetName">{{name}}</strong>
        <template is="dom-repeat" items="{{charts}}">
            <div id="chart{{index}}" class="horizon">
                <span class="htitle">{{item.MessageBodyClassName}}</span>
                <span class="hvalue">{{item.Value}}</span>
            </div>
        </template>
    </template>
    <script>

        Polymer({
            is: 'widget-horizon',
            properties: {
                dataid: {
                    type: String
                },
                name: {
                    type: String
                },
                gethistory: {
                    type: Number
                },
                charts: {
                    type: Array,
                    value: function() {return []}
                },
                isloading: {
                    type: Boolean,
                    value: true
                }
            },
            ready: function() {
                var self = this;
                var color;
                subscribe(self.dataid);
                getHistory(self.dataid,self.gethistory);
                registerCallback(this.dataid, function (data) {
                    self.charts = data.data;
                    for (var i = 0; i < self.charts.length; i ++){
                        var v = self.charts[i].Value;
                        if (v < .3) {
                            color = '#006837'
                        } else if(v >= .3 && v < 1) {
                            color = '#1a9850'
                        }
                        $('#chart' + i).append('<span class="hpip" style="background-color:' + color + '"></span>')
                    }
                    self.isloading = false;
                });


            }
        });
    </script>
</dom-module>

参考：

<widget-horizon  dataid="RegResponseTimes" name="Response Times" gethistory="15"></widget-horizon>

getHistory（）

function getHistory(dataid,count) {
    pubnub.history({
        channel : dataid,
        callback : function(m){
            var msgs = m[0];
            if (count > msgs.length) count = msgs.length;
            for (var i = 0; i < count; i++) {
                var msg = msgs[i];
                processMessage(msg);
            }
        },
        count : count
    });
}

而processMessage（）

function processMessage(msg){
    callbackMapFunctions[msg.id](msg);
}

registerCallback（）

function registerCallback(id, callback) {
    callbackMapFunctions[id] = callback;
}

subscribe（），有效。

function subscribe(chnl) {
    if(typeof pubnub != 'undefined') {
        console.log("Subscribing to " + chnl);
        pubnub.subscribe({
            channel : chnl,
            message : function(m){
                var msg = $.parseJSON(m);
                log(chnl,"Data Received");
                processMessage(msg);
            }
        }
    }

Answer 1

作为解决方法，我使用javascript而不是聚合物模板：

var el = $('#chart'  + id);
if (el.length == 0) {
    $('#hcharts' + self.dataid).append('<div id="chart' + id + '" class="horizon"><span class="htitle">' + lbl + '</span><span class="hvalue"></span><div class="timedValue"></div></div>')
}

在处理pubnub历史之前没有加载聚合物模板？

1 个答案: