我的骨干视图有以下结构
主图表视图如下:
<div id="id-main-charts">
<div id="id-time-tab">
<ul class="nav nav-pills nav-justified nav-prima">
<li><a href="#" type="Daily" class="agraphType" data-toggle="tab">Daily</a></li>
<li><a href="#" type="Weekly" class="agraphType" data-toggle="tab">Weekly</a></li>
<li><a href="#" type="Monthly" class="agraphType" data-toggle="tab">Monthly</a></li>
<li class="active"><a href="#" class="agraphType" type="Quarterly" data-toggle="tab">Quarterly</a></li>
<li><a href="#" type="Yearly" class="agraphType" data-toggle="tab">Yearly</a></li>
</ul>
</div>
<div class="col-lg-5" id="id-sales-pie">
</div>
<div class="col-lg-7" id="id-sales-line">
</div>
MainChartView:
var $ = require('jquery'),
Handlebars = require('handlebars'),
Backbone = require('backbone'),
mainchartTemplate = require('../../templates/dashboard/ChartsContainer.html'),
pieChartView = require('../../views/dashboard/PieChartView'),
lineChartView = require('../../views/dashboard/LineChartView'),
moment = require('moment');
var MainChartView = Backbone.View.extend({
el: $('#id-charts-stats'),
initialize: function() {
this.pie = new pieChartView();
this.line = new lineChartView();
},
events: {
'click a.agraphType': "changeGraphData"
},
changeGraphData: function(ev) {
ev.preventDefault();
var type = $(ev.target).attr('type');
sessionStorage.setItem("typeOfGraph", type);
this.render();
},
render: function() {
this.$el.html(mainchartTemplate);
this.line.setElement(this.$('#id-sales-line')).delegateEvents().render();
this.pie.setElement(this.$('#id-sales-pie')).delegateEvents().render();
}
});
module.exports = MainChartView;
当我点击导航丸时,它会重新渲染视图,我的选定标签不再被选中。
我尝试删除this.render
然后就可以了。但我需要渲染来重新加载我的其他子视图。
请帮忙。