Question

我有一个页面显示一些段落和图表，Backbone和Marionette成功显示段落，但没有图表。

我的脚本没有错误，只有当我刷新/重新加载浏览器时才会显示图表。也许图表没有呈现或类似的东西。我不知道这里发生了什么。我使用Chartist-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'});
            }
        }
    }
})

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

在模板中使用DOMContentLoaded是不对的！尝试使用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);
    }
});

然后将模板更改为：

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

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

Backbone.js：不呈现某些视图

1 个答案: