javascript - Backbone : Trigger not working properly

Question

第一个代码和触发器可以工作

 filterPanel.on("form:filter", function(data){
        var criterion = data
        filteredData.filter(criterion)
        data1 = filteredData.filter(criterion)
        if(data1.length === 0){
            $('.warn').finish().slideDown(80,function(){
                setTimeout(function(){$('.warn').finish().slideUp(80)},3000)
            })
        } else {
            $('.statistic').fadeOut(100,function(){
               chartPanel.trigger("chart:render") //This Works and call "chart:render"
               $('.statistic').fadeIn(100) 
            })
        }
    })

但是当我打电话时

filterPanel.trigger("form:filter" ,firstFilter)

在上面的同一页面中，第一个代码不起作用？我想调用“form:filter”

这是我的完整代码

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

                filterPanel = new Chart.filterPanel()
                chartLayout = new Chart.chartLayout()
                emptyView = new Chart.emptyView();

                var firstFilter = {
                    date1 : "10/08/2016",    
                    date2 : "10/08/2016"   
                }

                filterPanel.trigger("form:filter" ,firstFilter)

                chartPanel = new Chart.chartPanel({
                    collection: filteredData
                })


                filterPanel.on("form:filter", function(data){
                    var criterion = data
                    filteredData.filter(criterion)
                    data1 = filteredData.filter(criterion)
                    if(data1.length === 0){
                        $('.warn').finish().slideDown(80,function(){
                            setTimeout(function(){$('.warn').finish().slideUp(80)},3000)
                        })
                    } else {
                        $('.statistic').fadeOut(100,function(){
                           chartPanel.trigger("chart:render")
                           $('.statistic').fadeIn(100) 
                        })
                    }
                })

                filterPanel.on("filter: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);
                        }
                    })
                })

                chartPanel.on("chart:render",function(){
                    //Chartist JS           
                    var tanggal = []
                    var label = data1.models.map(function(model,index){
                        return model.get("tanggal")
                    })

                    function unique(list) {
                        var result = [];
                        $.each(list, function(i, e) {
                            if ($.inArray(e, result) == -1) result.push(e);
                        });
                        return result;
                    }

                    var labels = unique(label)

                    var tshirtv = [];
                    var casev = [];  
                    var tanggal = [];

                    var series = data1.models.map(function(model,index){
                        tanggal[index] = model.get("tanggal");

                        if(tanggal[index - 1] === model.get("tanggal")){
                            if(model.get("produk")==="T-Shirt"){
                                tshirtv[index - 1] = model.get("jumlah");
                            } else if(model.get("produk")==="Case"){
                                casev[index - 1] = model.get("jumlah");
                            }
                        } else {
                            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)

                    if((tshirtv.length !== 1) && (casev.length !== 1))  {
                        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()
                            ]
                        }

                        var responsiveOptions = [
                          [
                              'screen and (max-width: 640px)', {
                                showLine: false,
                                showPoint : true,
                                axisX: {
                                  labelInterpolationFnc: function(value) {
                                    return value.substr(0,2);
                                  }
                                }
                              }
                          ],
                          [
                              'screen and (max-width: 360px)', {
                                showLine: false,
                                showPoint : true,
                                height:"100%",
                                axisX: {
                                  labelInterpolationFnc: function(value) {
                                    return value.substr(0,2);
                                  }
                                }
                              }
                          ]
                        ];


                        new Chartist.Line($('.statistic',this.el)[0],data,option,responsiveOptions)
                    } else {
                        //Donut Chart
                        var data2 = {
                            labels : ['T-Shirt', 'Case'],
                            series : [tshirtv[0], casev[0]]
                        }
                        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.Pie($('.statistic',this.el)[0],data2,option2)
                    }

                })

                chartLayout.on("show", function(){
                    chartLayout.filterRegion.show(filterPanel)
                    chartLayout.chartRegion.show(chartPanel)
                })

                programming.wrapper.show(chartLayout)

            } else {
                chartPanel = new Chart.notfound()

                programming.wrapper.show(chartPanel)
            }


        }
    }
})

Answer 1

看看你的代码:

...

filterPanel.trigger("form:filter" ,firstFilter)

...

filterPanel.on("form:filter", function(data){
    var criterion = data
    filteredData.filter(criterion)
    data1 = filteredData.filter(criterion)
    if(data1.length === 0){
        $('.warn').finish().slideDown(80,function(){
            setTimeout(function(){$('.warn').finish().slideUp(80)},3000)
        })
    } else {
        $('.statistic').fadeOut(100,function(){
           chartPanel.trigger("chart:render")
           $('.statistic').fadeIn(100) 
        })
    }
})

....

一开始你调用触发器。触发函数找不到回调(因为您尚未定义它)。在下一步中，您将为触发器 form:filter 定义回调函数。

您必须交换调用触发器并为触发器定义回调。

...

filterPanel.on("form:filter", function(data){
    var criterion = data
    filteredData.filter(criterion)
    data1 = filteredData.filter(criterion)
    if(data1.length === 0){
        $('.warn').finish().slideDown(80,function(){
            setTimeout(function(){$('.warn').finish().slideUp(80)},3000)
        })
    } else {
        $('.statistic').fadeOut(100,function(){
           chartPanel.trigger("chart:render")
           $('.statistic').fadeIn(100) 
        })
    }
});

filterPanel.trigger("form:filter" ,firstFilter)

....