BackboneJs: come faccio a caricare i miei dati nel markup della pagina e quando li assegno alle mie raccolte

Question

Quindi, creazione di un'applicazione che utilizza più (2 per ora) raccolte globali, è un catalogo di entrambi i documenti e pazienti, hanno relazioni, ma non come in, 1 documento o un elenco di documenti appartenenti a 1 paziente, quindi sono in effetti 2 raccolte separate,

la mia app è strutturata in un sistema di moduli molto simile a come è descritto qui: http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules

la documentazione di backbone.js dice di bootstrap, per fare qualcosa di simile,

<script> 
    Accounts.reset(<%= @accounts.to_json %>); 
</script> 

che è all'interno di un'applicazione Rails, vorrei però bisogno di farlo in modo diverso in asp.net MVC3, molto probabilmente vorrei solo stampare il mio stringa JSON senza la <% =%>, che non è un rasoio stile motore di visualizzazione)

ma la mia domanda è qui,

questo Accounts.reset(...data...); è appena galleggianti qualche parte nel mio markup, non è in alcun modo ben strutturato nel mio sistema del modulo, non c'è un modo per fare bene Questo? dove posso ottenere i dati, dal mio modulo?

e un'altra domanda lato, supponiamo di avere un percorso nella mia spina dorsale app http://example.com/#documents

e qualcuno chiama questo link direttamente, farò la mia app avere i dati pronti (dal bootstrap) in tempo, prima che il percorso è di per sé eseguito?

Answer 1

Tendo a impostare gli oggetti application: un oggetto che incapsula tutto il codice necessario per avviare la mia applicazione. Quindi prendo i parametri nel costruttore dell'oggetto, in modo che possano essere utilizzati dall'oggetto app. Passare i dati JSON precaricati nell'oggetto app è una delle cose che faccio, per mantenere il codice sano e incapsulato.

Va qualcosa come questo, di solito:

MyApp = (function(Backbone, _){ 
    var MyModel = Backbone.Model.extend({}); 

    var MyCollection = Backbone.Collection.extend({ 
    model: MyModel 
    }); 

    var MyView = Backbone.View.extend({ 
    initialize: function(){ 
     this.collection.bind("reset", this.render, this); 
    }, 

    render: function(){ 
     // do stuff with the collection here 
    } 
    }); 

    var myApp = function(initialModels){ 
    this.start = function(){ 
     this.models = new MyCollection(); 
     this.myView = new MyView({collection: this.models}); 
     this.models.reset(initialModels); 
    }; 
    }; 

    return myApp; 
})(Backbone, _); 

E poi nella mia pagina che ha bisogno di avviare l'applicazione, faccio questo:

<script language="javascript"> 
    var myApp = new MyApp(<%= mymodels.to_json %>); 
    myApp.start(); 
</script> 

Questa è la versione di rotaie, naturalmente. Basta sostituire lo <%= ... %> con la tua versione per la sintassi Razor in ASP.NET MVC.

Answer 2

se su Rails: oltre alla risposta di Dericks, è possibile utilizzare Gon per "ottenere le variabili Rails in js".

allora si sarebbe inizializzare l'app del genere:

<script language="javascript"> 
    var myApp = new MyApp(gon.mymodels); 
    myApp.start(); 
</script> 

Answer 3

L'ottimo esempio da Derick! Per MVC 3+ utilizzare questa sintassi:

<script language="javascript"> 
    var myApp = new MyApp(@Html.Raw(Json.Encode(Model))); 
    myApp.start(); 
</script>