Javascript Backbone.js：不呈现某些视图

我有一个页面显示一些段落和图表，主干和木偶成功显示段落，但没有图表

我的脚本没有错误，仅当我刷新/重新加载浏览器时才会显示图表。可能图表没有渲染或类似的东西。我不知道这里发生了什么。我使用图表列表js来绘制图表

这是我的密码

View.js

programming.module("Program.Tutorial", function(Tutorial, programming, Backbone, Marionette, $, _){
    Tutorial.tutorV = Marionette.ItemView.extend({
        template : "#subtutorial",
        tagName : "div",
        className : "tutorial-wrapper"
    })

    Tutorial.tutorCV = Marionette.CompositeView.extend({
        template : "#tutorial",
        tagName : "div",
        childView : Tutorial.tutorV,
        childViewContainer : "div.subtutorial",
        serializeData : function(){
            return {
                model1 : this.model.toJSON(),
                model2 : this.options.model2.toJSON()
            }
        }
    })

    Tutorial.notfound = Marionette.ItemView.extend({
        template : "#notfound",
        tagName : "div"
    })
})

Controller.js

programming.module("Program.Tutorial", function(Tutorial, programming, Backbone, Marionette, $, _){
    Tutorial.Controller = {
        getTutorial : function(id){
            //Get Color Scheme From model that have id
            var program = programming.request("program:entities")
            var model2 = program.get(id)

            //Get Tutorial
            var tutorials = programming.request("tutorial:entities",id);
            var frameworks = programming.request("tutorial:framework");
            var modelFramework = frameworks.get(id);


            if(tutorials !== undefined) {

                var TutorialV = new Tutorial.tutorCV({
                    model:tutorials,
                    model2 : modelFramework
                })


                programming.wrapper.show(TutorialV);

                //Restyle the color scheme
                var color = model2.escape("color");
                var p_nama = model2.escape("nama");
                var header_text = "<div id='title'><i class='material-icons md-24 mrg-10'>code</i>"+ p_nama +" Programming</div>";
                $('#header').css({'background':color});
                $('#header').html(header_text);
                $('h2').css({'color':color});
                $('.chapter-title').css({'color':color});
                $('.btn-cta').css({'background-color': color});

            } else {
                var notfound = new Tutorial.notfound()

                programming.wrapper.show(notfound);


                //jQuery function that not working, expect if I reload the page
                var header_text = "<div id='title'><i class='material-icons md-24 mrg-10'>code</i>Programming Language</div>";
                $('#header').css({'background':'#00897B'});
                $('#header').html(header_text);
                $('h2').css({'color':'#00897B'});
            }
        }
    }
})

<!-- Region -->
<div id="wrapper">
            <h2>Opppss... Error :(</h2>
</div>


        <script type="text/template" id="tutorial">
            <h2>
            <a href="#listprogram/<%=model1.id%>" class="program"><i class="material-icons">arrow_back</i></a>
            <%=model1.title%></h2>
            <%=model1.content%>


            <!-- Here is the chart, if i remove the EventListener, .ct-chart is2 undefined, so I add that and its working just need to reload the browser to see the chart -->


            <h2>List of <%=model2.nama%> Framework</h2>
            <div class="ct-chart2 ct-perfect-fourth" style="width:450px;max-width:100%;margin:0 auto;"></div>

            <%
            document.addEventListener('DOMContentLoaded',function(){
            var chart = function(){
                var data = {
                    labels : model2.label,
                    series : [model2.user]
                }

                var option = {
                    showPoint : false,
                    lineSmooth : false,
                    axisX : {
                        showGrid : false
                    }
                }
                new Chartist.Line('.ct-chart2',data,option)
            }

            chart();
            })

            %>
        </script>

programming.module（“Program.Tutorial”，函数（教程，编程，主干，木偶，$，）{
教程.控制器={
getTutorial:函数（id）{
//从具有id的模型获取颜色方案
var program=programming.request（“程序：实体”）
var model2=program.get（id）
//获取教程
var tutorials=programming.request（“tutorial:entities”，id）；
var frameworks=programming.request（“教程：framework”）；
var modelFramework=frameworks.get（id）；
如果（教程！==未定义）{
var TutorialV=新建Tutorial.tutorCV({
模型：教程，
模型2：模型框架
})
programming.wrapper.show（TutorialV）；
//重新设计配色方案
var color=model2.escape（“颜色”）；
var p_nama=model2.逃逸（“nama”）；
var header_text=“code”+p_nama+“编程”；
$（'#header'）.css（{'background'：color}）；
$（'#header'）.html（header#u text）；
$（'h2'）.css（{'color'：color}）；
$（'.chapter title'）.css（{'color'：color}）；
$（'.btn-cta'）.css（{'background-color'：color}）；
}否则{
var notfound=new Tutorial.notfound（）
programming.wrapper.show（notfound）；
//jQuery函数不起作用，如果我重新加载页面，则除外
var header_text=“代码编程语言”；
$（'#header'）.css（{'background'：'#00897B'}）；
$（'#header'）.html（header#u text）；
$（'h2'）.css（{'color'：'#00897B'}）；
}
}
}
})

Index.html

programming.module("Program.Tutorial", function(Tutorial, programming, Backbone, Marionette, $, _){
    Tutorial.Controller = {
        getTutorial : function(id){
            //Get Color Scheme From model that have id
            var program = programming.request("program:entities")
            var model2 = program.get(id)

            //Get Tutorial
            var tutorials = programming.request("tutorial:entities",id);
            var frameworks = programming.request("tutorial:framework");
            var modelFramework = frameworks.get(id);


            if(tutorials !== undefined) {

                var TutorialV = new Tutorial.tutorCV({
                    model:tutorials,
                    model2 : modelFramework
                })


                programming.wrapper.show(TutorialV);

                //Restyle the color scheme
                var color = model2.escape("color");
                var p_nama = model2.escape("nama");
                var header_text = "<div id='title'><i class='material-icons md-24 mrg-10'>code</i>"+ p_nama +" Programming</div>";
                $('#header').css({'background':color});
                $('#header').html(header_text);
                $('h2').css({'color':color});
                $('.chapter-title').css({'color':color});
                $('.btn-cta').css({'background-color': color});

            } else {
                var notfound = new Tutorial.notfound()

                programming.wrapper.show(notfound);


                //jQuery function that not working, expect if I reload the page
                var header_text = "<div id='title'><i class='material-icons md-24 mrg-10'>code</i>Programming Language</div>";
                $('#header').css({'background':'#00897B'});
                $('#header').html(header_text);
                $('h2').css({'color':'#00897B'});
            }
        }
    }
})

<!-- Region -->
<div id="wrapper">
            <h2>Opppss... Error :(</h2>
</div>


        <script type="text/template" id="tutorial">
            <h2>
            <a href="#listprogram/<%=model1.id%>" class="program"><i class="material-icons">arrow_back</i></a>
            <%=model1.title%></h2>
            <%=model1.content%>


            <!-- Here is the chart, if i remove the EventListener, .ct-chart is2 undefined, so I add that and its working just need to reload the browser to see the chart -->


            <h2>List of <%=model2.nama%> Framework</h2>
            <div class="ct-chart2 ct-perfect-fourth" style="width:450px;max-width:100%;margin:0 auto;"></div>

            <%
            document.addEventListener('DOMContentLoaded',function(){
            var chart = function(){
                var data = {
                    labels : model2.label,
                    series : [model2.user]
                }

                var option = {
                    showPoint : false,
                    lineSmooth : false,
                    axisX : {
                        showGrid : false
                    }
                }
                new Chartist.Line('.ct-chart2',data,option)
            }

            chart();
            })

            %>
        </script>

哎呀。。。错误：(
框架清单

在模板中使用

DOMContentLoaded

不正确！请尝试使用：

然后将模板更改为：

<script type="text/template" id="tutorial">
            <h2><a href="#listprogram/<%=model1.id%>" class="program"><i class="material-icons">arrow_back</i></a>
            <%=model1.title%></h2>
            <%=model1.content%>
            <h2>List of <%=model2.nama%> Framework</h2>
            <div class="ct-chart2 ct-perfect-fourth" style="width:450px;max-width:100%;margin:0 auto;"></div>
</script>

框架清单

---

我希望这能对你有所帮助。

嘿，谢谢你的回答，但当我尝试这样做时，会出现一个错误：ChartList.min.js:8未捕获的语法错误：未能在“文档”上执行“querySelector”：“[object object object]”不是有效的请尝试将此

更改为新的ChartList.Line（this.ui.chart，data，option）；

为

新的ChartList.Line($（'.ct-chart2'，this.el][0]，数据，选项）；

是它使用

标签：['sample'，'sample title'，series:[120230]

您的数据有问题吗？！@engkusnadibut不使用

标签：this.options.model2.label，series:[this.options.model2.user]

，在控制台中，如果说

对象标签未定义，序列未定义

，可能是

this.options.model2.label

调用错误？