Backbone Collection

我試圖在後端使用Django製作Backbone Application。我正在關注Backbone教程。我用下面的代碼：Backbone Collection

代碼

<!doctype html> 
<html lang = "en"> 
    <meta charset = "utf-8"> 
    <title>IstreetApp</title> 
    <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="container"> 
     <h1>Book Manager</h1> 
     <hr /> 
     <div class="page"></div> 
    </div> 

    <script type = "text/template" id = "booklist.template"> 

    </script> 

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script> 
    <script> 

     $.ajaxPrefilter(function(options, originalOptions, jqXHR) { 
      options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url; 
     }); 

     var Books = Backbone.Collection.extend({ 
      url: '/books' 
     }); 

     var BookList = Backbone.View.extend({ 
      el: '.page', 
      render: function() { 
       var that = this; 
       var books = new Books(); 
       books.fetch({ 
        success: function(books) { 
         var template = _.template($('#booklist.template').html(), {books: books.models}); 
         that.$el.html(template); 
        } 
       }) 
      } 
     }); 

     var Router = Backbone.Router.extend({ 
      routes: { 
       '': 'home' 
      } 
     }) 

     var bookList = new BookList(); 

     var router = new Router(); 
     router.on('route:home', function() { 
      bookList.render(); 
     }); 

     Backbone.history.start(); 
    </script> 

</body> 
</html>

因爲收藏品都是沒有定義，成功的代碼不執行。我認爲收集數據應該來自服務器通過Django，但我不知道如何以及以何種形式。請幫助。我對骨幹和Django來說非常新穎。

來源

2013-03-16 Sumit Gera

爲什麼不在你的_fetch_調用中放置一個錯誤處理程序？ – snedkov 2013-03-16 17:55:28

@svetoslavnedkov我該怎麼做？ – 2013-03-16 18:08:17

它使用與成功處理程序相同的格式，只需在成功處理程序後面放置'，error：function（data）{alert（data）;}'即可。 – snedkov 2013-03-16 18:14:48

當你調用獲取你的收藏，它使一個Ajax請求：

http://backbonejs-beginner.herokuapp.com/books

然而，沒有API建立在那裏。無論是兩件事情之一需要發生：

1）您需要修改代碼以指向不同的URL，一個是確實有一個現有的API（也許無論你是使用教程有這樣的API）

2）你需要自己創建這樣的API上yoursever.com（然後讓你的骨幹代碼指向該API的URL代替）

沒有服務器來支持它，操作就像在骨幹save和fetch和這樣的簡單無法運作。

作爲一個側面說明，Django是一個web 網站框架。雖然您可以使用它創建服務器端API，但這並不是Django關注的焦點。正因爲如此，在Django中有幾個優秀的第三方庫用於執行RESTful API（即Backbone喜歡的類型）;我個人建議Django REST框架（我使用它，它工作得很好）或TastyPie（從未使用它，但它非常受歡迎）。

來源

2013-03-16 19:15:25 machineghost

這很有道理。我正在等待這樣的答案。 pystache（小鬍子）可以用於相同的目的嗎？ – 2013-03-17 03:43:56

你*可以*，但它是一個壞主意。我的意思是，你可以使用模板系統（pystache或者Django的）來做一個JSON響應，其模板如下：'{id：{{id}}，someField：{{valueOfSomeField}}，someString： '{someStringValue}}'}'和提供這些值的Django視圖。然而，它變得很難看。相反，在視圖中構建JSON（使用TastyPie/Django REST框架）幾乎可以更好地工作;例如'response = JSONResponse（）; response.id = id; response.someField = someField; response.someString = someStringValue;返回響應;'。 – machineghost 2013-03-17 04:15:35

P.S.我知道分號不是非常的Pythonic，但評論不支持換行符，所以... – machineghost 2013-03-17 04:20:03

當使用骨幹收集你需要從您的API URL返回對象的JSON數組（http://backbonejs-beginner.herokuapp.com/books）例

{[{"name":"bookname", "publisher": "penguin"}, {"name":"bookname", "publisher":"penguin"}]}

你還需要爲你收集的模型。模型看起來像這樣例子：

var Book = Backbone.Model.extend({ 
defaults: { 
"name": "", 
"publisher": "" 
} 
});

該集合的工作原理是通過分析JSON數組並打開每個對象的數組中的模型，你特定的（在這個瞬間的個體書的方式名稱和發佈者的值）。

當您在您的模型上創建.fetch（）時，您正在發出GET請求，因此請確保您的網址已準備好接收GET請求，並以我指定的頂層格式響應json數據。

來源

2015-07-13 17:09:27 DominicValenciana

Backbone Collection

回答

相關問題