Backbone.js未捕獲引用錯誤

Im新骨幹，試圖從Wordpress json插件獲取json並渲染成模板，但是當循環發佈時，出現以下錯誤未捕獲的ReferenceError：帖子未定義任何幫助讚賞。謝謝...Backbone.js未捕獲引用錯誤

jQuery(function($) { 
    var Post = Backbone.Model.extend(); 
    var Posts = Backbone.Collection.extend({ 
     model: Post, 
     url: '/api/get_post/?json=get_recent_posts', 
     parse: function(resp) { 
      console.log("posts", resp); 
      return resp; 
     } 
    }); 
    var listView = Backbone.View.extend({ 
     el: '#content', 
     template: _.template($("#post-template").html()), 
     initialize: function() { 
      this.model.bind("reset", this.render, this); 
     }, 
     render: function() { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 
    var AppRouter = Backbone.Router.extend({ 
     routes: { 
      "!/archive": "archive" 
     }, 
     archive: function() { 
      this.postList = new Posts(); 
      this.postListView = new listView({ 
       model: this.postList 
      }); 
      this.postList.fetch(); 
      this.postListView.render(); 
     } 
    }); 
    var app = new AppRouter(); 
    Backbone.history.start(); 
});

模板

<script id="post-template" type="text/template"> 
    <ul> 
     <% _.each(posts, function(post) { %> 
     <li id="<%= post.id %>"> 
      <a href="<%= post.url %>"><%= post.thumbnail %></a> 
     </li> 
     <% }); %> 
    </ul> 
</script>

的Json

{ 
    "status": "ok", 
    "count": 1, 
    "count_total": 1, 
    "pages": 1, 
    "posts": [{ 
     "id": 4, 
     "type": "post", 
     "slug": "test-post", 
     "url": "http:\/\/localhost:8888\/2013\/04\/test-post\/", 
     "status": "publish", 
     "title": "Test Post", 
     "title_plain": "Test Post", 
     "content": "", 
     "excerpt": "", 
     "date": "2013-04-17 15:12:21", 
     "modified": "2013-04-19 14:13:00", 
     "categories": [], 
     "tags": [], 
     "author": { 
      "id": 1, 
      "slug": "admin", 
      "name": "admin", 
      "first_name": "", 
      "last_name": "", 
      "nickname": "admin", 
      "url": "", 
      "description": "" 
     }, 
     "comments": [], 
     "comment_count": 0, 
     "comment_status": "closed", 
     "thumbnail": "http:\/\/localhost:8888\/wp-content\/uploads\/2013\/04\/test-image-150x150.jpg" 
    }] 
}

來源

2013-04-22 jackjlgregory

該錯誤來自模板編譯器。作爲一個提示，在你的'render（）'中做一個'console.log（this.model.toJSON（））'，看看打印出來的內容。另外，'this.postList'是一個集合，那麼爲什麼你將它作爲'model'傳入呢？ – Bojangles 2013-04-22 13:55:59

@Bojangles關於最後一部分，在Backbone中沒有用於視圖的'collection'鍵，所以如果你想創建一個「集合視圖」，你仍然必須使用'model'鍵。這不是什麼問題。 – Loamhoof 2013-04-22 13:57:00

@Loamhoof請在評論之前閱讀[文檔]（http://backbonejs.org/#View-constructor）。從骨幹文檔：'有幾個特殊的選項，如果通過，將直接附加到視圖：模型，集合，el，id，className，tagName和屬性。' – Bojangles 2013-04-22 14:00:12

調用Collection#toJSON將返回數組。因此沒有posts的關鍵。嘗試使用$(this.el).html(this.template(this.model.toJSON()[0]));，因爲您的收藏中只有一個模型（這很奇怪）。

您可能想要解析您在parse方法中的回覆，以返回resp.posts，以便您的收藏具有更多含義，並且實際上會爲每個帖子創建一個Post模型。

來源

2013-04-22 13:56:02 Loamhoof

嘗試做一些事情，如：

$(this.el).html({ 
    posts : this.template(this.model.toJSON()) 
});

代替：

$(this.el).html(this.template(this.model.toJSON()));

來源

2013-04-22 13:56:32

只是不，不會給出預期的結果。 – Loamhoof 2013-04-22 13:57:31

如果你想使用posts作爲包含在你的下劃線模板集合/數組變量，你需要把它作爲一個屬性的模板函數：

$(this.el).html(this.template({ posts: this.model.toJSON() }));

我本來還還以爲你的Posts集合類應返回在parse功能的職位如下圖所示（如職位就是BEING返回的JSON的一個屬性）：

var Posts = Backbone.Collection.extend({ 
    model: Post, 
    url: '/api/get_post/?json=get_recent_posts', 
    parse: function(resp) { 
     console.log("posts", resp); 
     return resp.posts || []; // grab the posts from the JSON 
    } 
});

而且，通常按照規定，您可能希望切換到使用視圖的collection屬性：

this.postListView = new listView({ 
    collection: this.postList 
});

，然後改變你的模板調用：{ posts: this.collection.toJSON() }。

來源

2013-04-22 14:44:32 WiredPrairie

Backbone.js未捕獲引用錯誤

回答

相關問題