BackboneJS con XML ajax

Question

esta es una pregunta en dos partes de un novato JS.

Por lo tanto, yo estaba tratando de crear una aplicación de red troncal utilizando RequireJS siguiendo Thomas Davis's tutorial.

1. ¿Cómo puedo crear colecciones de Backbone de una llamada ajax a un servidor que proporciona datos en XML? collections.fetch() parece estar esperando un backend JSON.

2. al intentar algunas cosas, terminé con el siguiente código, en el que la página no se actualiza al rellenar la colección "bookStore" desde Ajax success-callback.

   Aquí está lo lejos que he llegado hasta ahora.

   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); 
       } 
   }); 
   

Aquí, el éxito de devolución de llamada en la función "inicializar" parece ser el procesamiento de los datos adecuadamente y añadiendo a la colección. Sin embargo, la página no se actualiza.

Mientras estaba pasando a través de la consola de Firebug, la página se actualiza sin embargo. ¿Cómo resuelvo este problema?

Answer 1

1. Puede anular la función predeterminada parse para proporcionar soporte XML. Debe devolver los datos transformados en JSON http://backbonejs.org/#Collection-parse

2. Enlazar el render a un evento en lugar de refreshreset para Backbone < 1,0 oa un evento sync para Backbone> = 1,0

que podría tener este aspecto

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

Y una demostración http://jsfiddle.net/ULK7q/73/