Pikaday.js:未捕获RangeError:超出最大调用堆栈大小

时间:2016-08-09 07:51:07

标签: javascript backbone.js pikaday

我创建了一个简单的应用程序,其中包含带日期过滤器的表格和图表。有4种选择。今天,昨天,本月和上个月,以及一个提交按钮。它在页面加载时工作正常。表格列出了所有模型,图表显示了我想要的数据,完美。

当我选择一个选项(例如:本月)并第一次点击提交时,表格和图表令人耳目一新,完美无缺。

但是当我第二次选择时,它会给我错误,页面会冻结

pikaday.js:70未捕获RangeError:超出最大调用堆栈大小。

这是我的部分代码

            chartView.on("form:filter", function(data){
                var criterion = data
                filteredData.filter(criterion)
                data1 = filteredData.filter(criterion)
                chartView.trigger("view:render");
            })

以下是完整的部分代码

programming.module("Program.Chart",function(Chart, programming, Backbone, Marionette, $, _){
    Chart.Controller = {
        getData : function(){

            var data1 = programming.request("data:entities");

            if(data1 !== undefined){
                var filteredData = programming.Program.FilteredCollection({
                    collection : data1,
                    filterFunction : function(criterion){
                        return function(data){
                            var dateModel = moment(data.get("tanggal"),'DD/MM/YYYY');
                            var startDate = moment(criterion.date1,'DD/MM/YYYY')
                            var endDate = moment(criterion.date2,'DD/MM/YYYY')

                            if(dateModel.isSameOrAfter(startDate)){
                                if(dateModel.isSameOrBefore(endDate)){
                                    return data 
                                }
                            }
                        }
                    }
                })

                chartView = new Chart.chartV({
                    collection: filteredData
                })

                chartView.on("form:filter", function(data){
                    var criterion = data
                    filteredData.filter(criterion)
                    data1 = filteredData.filter(criterion)
                    chartView.trigger("view:render");
                })

                chartView.on("view:render", function(){
                    //DatePicker
                    var format = "DD/MM/YYYY"
                    var date1 = new Pikaday({
                        field : $("#date1",this.el)[0],
                        format : format
                    })
                    $("#date1",this.el)[0].value = moment().add('days').format(format)

                    var date2 = new Pikaday({
                        field : $("#date2",this.el)[0],
                        format : format
                    })
                    $("#date2",this.el)[0].value = moment().add('days').format(format)

                    var selectdate = $('#publicdate',this.el)[0];
                    selectdate.addEventListener("change",function(){
                        var value = selectdate.value;
                        var date1 = $('#date1',this.el)[0];
                        var date2 = $('#date2',this.el)[0];
                        if(value==="today"){
                            date1.value = moment().add('days').format(format)
                            date2.value = moment().add('days').format(format)
                            $(date1).attr('disabled',true);
                            $(date2).attr('disabled',true);
                        } else if(value==="yesterday"){
                            date1.value = moment().add(-1,'days').format(format)
                            date2.value = moment().add(-1,'days').format(format)
                            $(date1).attr('disabled',true);
                            $(date2).attr('disabled',true);
                        } else if(value==="thismonth"){
                            date1.value = moment().add('month').startOf('month').format(format)
                            date2.value = moment().add('month').endOf('month').format(format)

                            $(date1).removeAttr('disabled',true);
                            $(date2).removeAttr('disabled',true);
                        } else if(value==="lastmonth"){
                            date1.value = moment().add(-1,'month').startOf('month').format('DD/MM/YYYY')
                            date2.value = moment().add(-1,'month').endOf('month').format('DD/MM/YYYY')
                            $(date1).attr('disabled',true);
                            $(date2).attr('disabled',true);
                        }
                    })

                    //Chartist JS                     
                    var labels = data1.models.map(function(model){
                        return model.get("tanggal");
                    })
                    var tshirtv = [];
                    var casev = [];    
                    var tanggal = [];

                    var series = data1.models.map(function(model,index){
                        tanggal[index] = model.get("tanggal");
                        if(model.get("produk")==="T-Shirt"){
                            tshirtv[index] = model.get("jumlah");
                            casev[index] ="0";
                        } else if(model.get("produk")==="Case"){
                            casev[index] = model.get("jumlah");
                            tshirtv[index] ="0";
                        }
                    })

                    tshirtv = tshirtv.filter(()=>true)
                    casev = casev.filter(()=>true)
                    var series = [
                        {
                            name : "T-shirt",
                            data : tshirtv
                        },
                        {
                            name : "Case",
                            data : casev
                        }
                    ]

                    //Line Chart
                    var data = {
                        labels : labels,
                        series : series
                    }
                    var option = {
                        showArea : true,
                        lineSmooth : false,
                        showPoint : true,
                        chartPadding : {
                            bottom:60,
                            top:60,
                        },
                        axisX : {
                            showGrid:false,
                        },
                        axisY : {  
                            onlyInteger : true,
                        },  
                        plugins : [
                            Chartist.plugins.ctAxisTitle({
                                axisX: {
                                   axisClass: 'ct-axis-title',
                                   offset: {
                                      x: 0,
                                      y: 50
                                   },
                                   textAnchor: 'middle'
                                },
                                axisY: {
                                   axisTitle: 'Jumlah Penjualan',
                                   axisClass: 'ct-axis-title',
                                   offset: {
                                      x: 0,
                                      y: 0
                                   },
                                   textAnchor: 'middle',
                                   flipTitle: false
                                 }
                            }),
                            Chartist.plugins.ctPointLabels({
                                textAnchor : "middle"
                            }),
                            Chartist.plugins.legend()
                        ]
                    }

                    //Donut Chart
                    var data2 = {
                        labels : ['T-Shirt', 'Case'],
                        series : [12,23]
                    }
                    var option2 = { 
                        chartPadding : {
                            top : 0,  
                        },
                        labelInterpolationFnc : function(value,series){
                            return value + ": " +data2.series[series].value
                        },
                        donut:true,
                        donutWidth : 60,
                        plugins : [
                            Chartist.plugins.legend()
                        ]
                    }
                    new Chartist.Line($('.statistic',this.el)[0],data,option)
                    //new Chartist.Pie($('.statistic2',this.el)[0],data2,option2)
                })


                programming.wrapper.show(chartView)
            } else {
                chartView = new Chart.notfound()

                programming.wrapper.show(chartView)
            }


        }
    }
})

0 个答案:

没有答案