Renderizza dati JSON nel modello backbone.js

Ho guardato intorno a una tonnellata e non riesco a trovare una risposta a questo problema. Sto provando a prendere un file JSON locale, caricarlo usando Backbone.js e renderlo a un modello nel browser. Il mio file viene scaricato e il modello viene visualizzato, ma non viene mai compilato dai dati. qualche idea? Grazie in anticipo.Renderizza dati JSON nel modello backbone.js

HTML

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>People list</title> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> 
</head> 
<body> 


    <div class="container"> 
    <h1>People list</h1> 
    <hr /> 
    <div class="page"></div> 
    </div> 


    <script type="text/template" id="people-template"> 

    <table class="table striped"> 
     <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Age</th> 
      <th>Photo</th> 
      <th>Video</th> 
     </tr> 
     </thead> 
     <tbody> 
     <% _.each(PersonCollection, function(Person) { %> 
      <tr> 
      <td><%= Person.get("firstName") %></td> 
      <td><%= Person.get("lastName") %></td> 
      <td><%= Person.get("age") %></td> 
      <td><%= Person.get("photo") %></td> 
      <td><%= Person.get("video") %></td> 
      </tr> 
     <% }); %> 

     </tbody> 
    </table> 
    </script> 

    </body> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

JAVASCRIPT

<script> 

    // MODEL MODEL MODEL 
    // MODEL MODEL MODEL 

    var Person = Backbone.Model; 

    // COLLECTION COLLECTION COLLECTION 
    // COLLECTION COLLECTION COLLECTION 

    var PersonCollection = Backbone.Collection.extend({ 
     model: Person, 
     url: '/people.json', 
     parse: function (response) { 
     return response 
} 
    }); 

    // VIEWS VIEWS VIEWS 
    // VIEWS VIEWS VIEWS 

    var About = Backbone.View.extend ({ 
     el: '.page', 
     render: function() { 
     var that = this; 
     var people = new PersonCollection(); 
     people.fetch({ 
      success: function (PersonCollection) { 
      var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models}); 
      that.$el.html(template); 
      } 
     }) 
     } 
    }); 


    var About = new About(); 

    // ROUTES ROUTES ROUTES 
    // ROUTES ROUTES ROUTES  

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

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

    Backbone.history.start(); 

    </script>

JSON CAMPIONE

{ 
    "people": [ 
    { 
     "firstName": "Jane", 
     "lastName": "Doe", 
     "age": "32", 
     "photo": "test_photo", 
     "video": "test_video" 
    }, 
    { 
     "firstName": "James", 
     "lastName": "Hamm", 
     "age": "56", 
     "photo": "test_photo", 
     "video": "test_video" 
    },

Grazie ancora per un y suggerimenti. Sono nuovo di stackoverflow (prima domanda pubblicata) quindi fammi sapere se ho bisogno di fornire ulteriori informazioni.

fonte

2013-05-19 xEmptyCanx

Forse dovresti correggere i dati JSON, provare a rimuovere '" persone "', lasciare solo array con oggetti. – vadimrostok

WOW !! Questo ha fatto il trucco. Grazie mille! – xEmptyCanx

Se non si desidera modificare il file JSON, è possibile modificare la funzione di analisi in PersonCollection per restituire l'array di persone. Esempio:

var PersonCollection = Backbone.Collection.extend({ 
    model: Person, 
    url: '/people.json', 
    parse: function (response) { 
     // Return people object which is the array from response 
     return response.people 
    } 
});

Backbone Documentazione: http://backbonejs.org/#Model-parse

parse viene chiamato ogni volta che i dati di un modello viene restituito dal server, nel prendere, e salvare. La funzione passa l'oggetto della risposta non elaborata, e deve restituire l'hash degli attributi da impostare nel modello. L'implementazione di default di è un no-op, passando semplicemente attraverso la risposta JSON . Sovrascrivi questo se hai bisogno di lavorare con un'API preesistente o con lo spazio dei nomi migliore per le tue risposte.

fonte

2013-09-23 11:19:47

U puoi compilare direttamente i dati JSON con la tua raccolta. La raccolta si occuperà di compilare i dati in base alla serie di oggetti JSON. Nel tuo caso se non vuoi modificare i dati JSON, cioè se vuoi mantenere l'attributo 'people' così com'è, puoi popolare tutti i dati per backbone-relational.js. Aiuta a lavorare con i dati JSON nidificati.

fonte

2014-04-05 07:44:46

Renderizza dati JSON nel modello backbone.js

risposta

Problemi correlati