Question

根据the example，它应该在浏览器中显示该集合，但它不显示任何内容，也没有错误消息。

(function ($) {
    var MessageModel = Backbone.Model.extend({
        defaults: {
            code: 0,
            message: "Test Message example_2"
        }
    });

    var MessageCollection = Backbone.Collection.extend({
        model: MessageModel,
    })

    // Create two views, one for message list and another for message item.
    var MessageListView = Backbone.View.extend({
        tagName: "ul",
        render: function(eventName) {
            _.each(this.model.models, function(msg){
                $(this.el).append(new MessageListItemView({model:msg}))
            }, this);

            return this;
        }
    });

    var MessageListItemView = Backbone.View.extend({
        tagName: "li",
        template: $("#tpl-message-item").html(),

        render: function(eventName) {
            var tmpl = _.template(this.template);  //tmpl is a function that takes a JSON object and returns html
            this.$el.html(tmpl(this.model.toJSON()));  //this.$el is what we defined in tagName. Use $el to get access to jQuery html() function 

            return this;
        }
    })

    var MessageRouter = Backbone.Router.extend({
        routes: {
            "": "displayMessages"
        },

        displayMessages: function(){
//            var msgx = new MessageModel({ code: "001X", message: "Registration Successfully X" });
//            console.log(msgx.toJSON());  // Display mesasge to console

            var msg1 = new MessageModel({ code: "001", message: "Registration Successfully" });
            var msg2 = new MessageModel({ code: "002", message: "Registration Failed" });
            var msg3 = new MessageModel({ code: "003", message: "Login Successfully" });
            var msg4 = new MessageModel({ code: "004", message: "Login Failed" });

            var messageCollection = new MessageCollection([ msg1, msg2, msg3, msg4 ]);

            // Use underscore.js iterator "each" function to retrieve data of "MessageCollection"
//            _.each(messageCollection.models, function (msg) {
//                console.log( "code => " + msg.get("code") + ", message => " + msg.get("message") );
//                alert("code => " + msg.get("code") + ", message => " + msg.get("message"));
//            });

            var messageListView = new MessageListView({model: messageCollection});

            $('#messageList').html(messageListView.render().el);
        }
    });

    var messageRouter = new MessageRouter();
    Backbone.history.start();


})(jQuery);

以下是模板：

<html>
    <head>
        <title>php backbone.js example 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
        <script type='text/javascript' src='../../../../wp-includes/js/underscore.min.js'></script>
        <script type='text/javascript' src='../../../../wp-includes/js/backbone.min.js'></script>
        <script type='text/javascript' src='js/example_2.js'></script>

        <!-- add a div for contain message list and add a template for render each message item. -->
        <div id="messageList"></div>

        <!-- Templates -->
        <script type="text/template" id="tpl-message-item">
            <a href="#" id="<%= code %>"><%= message %></a>
        </script>
    </body>
</html>

Answer 1

您正在页面准备好之前加载脚本文件。

路由器中的以下行失败，因为文档中尚不存在messageList div。

$('#messageList').html(messageListView.render().el);

只需将脚本放在底部即可。

<body>
    <!-- add a div for contain message list and add a template for render each message item. -->
    <div id="messageList"></div>

    <!-- Templates -->
    <script type="text/template" id="tpl-message-item">
        <a href="#" id="<%= code %>"><%= message %></a>
    </script>

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
    <script type='text/javascript' src='../../../../wp-includes/js/underscore.min.js'></script>
    <script type='text/javascript' src='../../../../wp-includes/js/backbone.min.js'></script>
    <script type='text/javascript' src='js/example_2.js'></script>
</body>

Backbone中此代码中的错误在哪里？

1 个答案: