BackboneJS with XML ajax

Question

這是一個來自JS新手的兩部分問題。

所以，我試圖創建一個使用requireJS的主幹應用程序，方法如下：Thomas Davis's tutorial。

1. 我該如何去創建一個Ajax調用中的Backbone集合到一個提供XML數據的服務器？ collections.fetch（）似乎期待JSON後端。

2. 在嘗試一些事情時，我結束了以下代碼，其中在從Ajax success-callback中填充集合「bookStore」時頁面不刷新。

   這是我到目前爲止得到了多少。

   var bookListView = Backbone.View.extend({ 
       el: $("#books"), 
       initialize: function() { 
        thisView = this; 
        $.ajax({ 
         type: "GET", 
         url: "books.xml", 
         dataType: "xml", 
         success: function (data) { 
          console.log(data); 
          $(data).find('book').each(function (index) { 
           var bookTitle = $(this).find('name').text(); 
           bookStore.add({ title: bookTitle }); 
   
           console.log(seid); 
          }); 
          thisView.collection = bookStore; 
          thisView.collection.bind('add', thisView.tryBind); 
   
         } 
        }).done(function (msg) { 
         alert("Data retrieved: " + msg); 
        }); 
   
        this.collection = bookStore; 
        this.collection.bind("add", this.exampleBind); 
        this.collection.bind("refresh", function() { thisView.render(); }); 
        /* 
        // This one works! 
        bookStore.add({ name: "book1" }); 
        bookStore.add({ name: "book2" }); 
        bookStore.add({ name: "book3" }); 
        */ 
       }, 
       tryBind: function (model) { 
        console.log(model); 
       }, 
       render: function() { 
        var data = { 
         books: this.collection.models, 
        }; 
        var compiledTemplate = _.template(bookListTemplate, data); 
        $("#books").html(compiledTemplate); 
       } 
   }); 
   

在這裏，成功回調中的「初始化」功能似乎是正確處理數據並添加到集合中。但是，頁面不刷新。

當我單步執行Firebug控制檯時，頁面會刷新。我該如何解決這個問題？

Answer 1

1. 您可以覆蓋默認的parse函數來提供XML支持。應該轉化成JSON數據http://backbonejs.org/#Collection-parse

2. 綁定渲染返回到reset事件，而不是refresh骨幹< 1.0或到sync事件骨幹> = 1.0

它看起來是這樣的

var Book = Backbone.Model.extend(); 

var Books = Backbone.Collection.extend({ 
    model: Book, 
    url: "books.xml", 

    parse: function (data) { 
     var $xml = $(data); 

     return $xml.find('book').map(function() { 
      var bookTitle = $(this).find('name').text(); 
      return {title: bookTitle}; 
     }).get(); 
    }, 

    fetch: function (options) { 
     options = options || {}; 
     options.dataType = "xml"; 
     return Backbone.Collection.prototype.fetch.call(this, options); 
    } 
}); 

var bookListView = Backbone.View.extend({ 
    initialize: function() { 
     this.listenTo(this.collection, "sync", this.render); 
    }, 

    render: function() { 
     console.log(this.collection.toJSON()); 
    } 
}); 

var bks = new Books(); 
new bookListView({collection: bks}); 
bks.fetch(); 

並演示http://jsfiddle.net/ULK7q/73/