Backbone.js : Not rendering some view

Question

I have a page that display some paragraphs and a chart, Backbone and Marionette success show the paragraphs, but not with the chart.

I haven't error on my Script, the chart is show only when I refresh/reload the browser. Maybe the chart is not rendered or something like that. I don't know what happening here. I use Chartist-js for the chart.

Here is my code

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'});
            }
        }
    }
})

Index.html

<!-- 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>

Answer 1

Using DOMContentLoaded inside the template is not right! Try to use onRender :

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

        var data = {
            labels: this.options.model2.label,
            series: [this.options.model2.user]
        }

        var option = {
            showPoint: false,
            lineSmooth: false,
            axisX: {
                showGrid: false
            }
        }
        new Chartist.Line($('.ct-chart2', this.el)[0], data, option);
    }
});

Then change your template to:

<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>

I hope this will help you.