Question

有人可以指出我正确的方向。我试过谷歌，并没有找到很多关于我的问题。虽然以下代码在直接运行.html文件时工作得很好，但在节点表达应用程序中提供文件时却没有。问题是，节点I看不到任何数据。页面加载正常，但没有数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <script src="jquery.js"></script>
    <script src="handlebars.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <script src="moment.js"></script>

    <!-- Setup our templates -->
    <script id="PersonTemplate" type="text/x-handlebars-template">
        <div>
            Person:<br>
            {{name}}
            {{age}}
        </div>
    </script>

    <!--
        Note the []  this is important
    because handlebars and backbone collections
    dont play well with each other in regards
    to naming JSON groups
    -->
    <script id="PeopleTemplate" type="text/x-handlebars-template">
        <div>
            People:<br>
            {{#each []}}
            {{this.name}}
            {{this.age}}
            <br/>
            {{/each}}
        </div>
    </script>
    <!-- End templates setup -->


    <script>
        // Stub out the person model
        var Person = Backbone.Model.extend({

        });

        // Create a collection of persons
        var People = Backbone.Collection.extend({
            model: Person
        });

        // Define the view for a single person
        var PersonView = Backbone.View.extend({
            render: function() {
                // This is method that can be called
                // once an object is init. You could
                // also do this in the initialize event
                var source = $('#PersonTemplate').html();
                var template = Handlebars.compile(source);
                var html = template(this.model.toJSON());

                $(this.el).html(html);
            }
        });

        // Define the view for People
        var PeopleView = Backbone.View.extend({
            render: function() {
                // This is method that can be called
                // once an object is init. You could
                // also do this in the initialize event
                var source = $('#PeopleTemplate').html();
                var template = Handlebars.compile(source);
                var html = template(this.collection.toJSON());

                $(this.el).html(html);
            },

            initialize: function(){
                this.collection.on('add', this.render, this)
            }
        });

        // Create instance of People Collection
        var people = new People();

        // Create new instances of the person models
        var person = new Person({name: "Tim", age: 5});
        var person2 = new Person({name: "Jill", age: 15});

        // Create instances of the views
        var personView = new PersonView({
            model: person
        });
        var peopleView = new PeopleView({
            collection: people
        });

        $(document).ready(function(){
            // We have to do this stuff in the dom ready
            // so that the container objects get built out

            // Set el of the views.
            personView.el = $('#personContainer');
            peopleView.el = $('#peopleContainer');

            // Add them to a new instance of the people collection
            people.add(person);
            people.add(person2);

            // Render the views.  If you are using the initialize
            // method then you do not have to do this step.
            personView.render();
            //peopleView.render();

            // Try on console!
            // people.add(new Person({name: 'Rames', age:'23'}));

        });
    </script>

</head>
<body>
<div id='personContainer' ></div>
<hr>
<div id='peopleContainer' ></div>

</body>
</html>

提前感谢您的帮助。

模板无法正确渲染

0 个答案: