アプリで読み込まれる js ファイルにこのビュー モデルがあります。
var portfolioViewModel = function() {
var self = this;
this.selectedCompany = ko.observable('All Companies');
this.allComp = ko.observable(true);
this.chartSeries = ko.observableArray();
$(function(){
self.chart.addSeries(companyChart['All Companies']);
});
$.each(companyData, function(index, company) {
self[company] = ko.observable(false);
self.chartSeries.push(companyChart[company]);
});
this.chart = ko.observable();
this.showCompany = function(company){
self.hideCompanies();
self[company](true);
self.allComp(false);
self.selectedCompany(company);
while(self.chart.series.length > 0){
self.chart.series[0].remove(true);
}
self.chart.addSeries(companyChart[company]);
}
this.allCompanies = function(){
self.hideCompanies();
self.allComp(true);
self.selectedCompany('All Companies');
self.chart.addSeries(companyChart['All Companies']);
$.each(companyData, function(index, company) {
self.chart.addSeries(companyChart[company]);
});
}
this.hideCompanies = function(){
$.each(companyData, function(i, c){
self[c](false);
});
while(self.chart.series.length > 0){
self.chart.series[0].remove(true);
}
}
}
選択された会社に基づいて、ハイ チャート チャートへのシリーズの追加を制御します。
私のパーシャルでは、いくつかの HTML と、次の JavaScript コード ブロックがあります。
<!--SCRIPTS-->
<script type="text/javascript">
<% companies = current_user.list_of_companies %>
<% funding_date = current_user.first_funding_date * 1000 %>
var companyData = <%= companies.map(&:name).to_json.html_safe %>;
var companyChart = {};
companyChart['All Companies'] = {
name: 'Total Portfolio',
pointInterval: <%= 1.day * 1000 %>,
pointStart: <%=funding_date %>,
data: <%= current_user.portfolio_values.group("portfolio_values.day").select("portfolio_values.day, SUM(portfolio_values.value) as totals").map(&:totals).collect{|x| x.to_i} %>
}
<% companies.each do |company|%>
companyChart['<%= company.name %>'] = {
name: '<%= company.name %>',
pointInterval: <%= 1.day * 1000 %>,
pointStart: <%= funding_date %>,
data: <%= current_user.portfolio_values.where(:company_id => company.id).map(&:value).collect{|x| x.to_i} %>
}
<% end %>
var vm = new portfolioViewModel();
ko.applyBindings(vm);
vm.chart = new Highcharts.StockChart({
chart: {
renderTo: 'chart1',
backgroundColor: 'transparent',
zoomType: 'xy',
type: 'areaspline',
style: {
color: '#ffffff'
}
},
labels : {
style: {
color: 'red'
}
},
colors: [
'#ea00ff',
'#229aff',
'#ff4e00',
'#ea00ff',
'#229aff',
'#ff4e00',
'#ea00ff',
'#229aff',
'#ff4e00',
'#ea00ff',
'#229aff',
'#ff4e00'
],
credits: {
enabled: false
},
rangeSelector: {
enabled: false,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'all',
text: 'All'
}],
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
style: {
color: '#fff',
fontWeight: 'bold'
},
states: {
hover: {
stroke: 'none',
fill: 'black'
},
select: {
stroke: 'none',
fill: 'black',
style: {
color: 'white'
}
}
}
},
inputStyle: {
color: '#fff',
fontWeight: 'bold',
borderColor:'transparent',
background: 'transparent'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
}
},
navigator: {
enabled: false,
},
plotOptions : {
areaspline : {
lineWidth : 2,
fillOpacity : .2,
shadow:true,
marker : {
enabled : false,
symbol: 'circle'
}
}
},
yAxis: {
alternateGridColor: 'rgba(0,0,0,0.1)',
gridLineColor: 'rgba(0,0,0,0.3)',
lineColor: 'rgba(0,0,0,0.3)',
lineWidth: 1,
labels: {
style: {
color: 'rgba(255,255,255,0.6)',
fontWeight: 'bold'
}
}
},
xAxis: {
gridLineWidth: 1,
gridLineColor: 'rgba(0,0,0,0.3)',
type: 'datetime',
lineColor: 'rgba(0,0,0,0.3)',
labels: {
style: {
color: 'rgba(255,255,255,0.6)',
fontWeight: 'bold'
}
}
},
scrollbar : {
enabled : false
},
series: vm.chartSeries()
});
</script>
<!--SCRIPTS-->
バインディングが適用され、スクリプトが部分的に読み込まれることもありますが、多くの場合、そうではありません。パーシャルへのリモート呼び出しでロードされない場合 (HTML が通過しても)、スクリプト ブロックは完全に欠落しているようです。
これをデバッグする方法さえわかりません。明らかな間違いに気づいた人はいますか？私はjavascriptが初めてです。