Backbone中代碼中的錯誤在哪裏？

-3

根據the example，它應該顯示在瀏覽器中的集合，但它什麼也沒有顯示，也沒有錯誤信息。Backbone中代碼中的錯誤在哪裏？

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

來源

2017-02-07 Marco

mm ..可能會打開錯誤報告嗎？ – Naruto

@Naruto，我如何打開錯誤報告？當我添加一條帶有錯誤的行時，會顯示，而不是在這種情況下... – Marco

您加載腳本文件之前的頁面已準備就緒。

由於文檔中尚不存在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>

來源

2017-02-07 18:33:45

Backbone中代碼中的錯誤在哪裏？

回答

相關問題