Question

我在使用我的app加载的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很新。

Answer 1

通常情况下，如果有任何类型的javascript错误停止执行后来的javascript，这将阻止您的ko模型加载，或导致它只加载部分方式。我建议使用Firefox或类似的Firebug来检查导致问题的javascript错误。

此外，'gon'gem是将rails模型中的信息导入javascript的好方法。我也喜欢使用带有.json.rabl模板的rabl gem来获取更新淘汰模型的ajax请求。

敲击绑定未应用于轨道3远程部分负载

1 个答案: