Backbone : 触发器无法正常工作
Backbone : Trigger not working properly
第一个代码和触发器工作
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)
}
}
}
})
看看你的代码：
...
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)
....
第一个代码和触发器工作
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)
}
}
}
})
看看你的代码：
...
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)
....