2012-09-19 13 views
5

C'è un modo ingegnoso di legare una vista a un html già renderizzatore nella pagina?Collegamento di una vista backbone a html già renderer

Esempio il server carica tutta la pagina HTML, quindi carica le viste su tale html senza utilizzare il metodo di rendering la prima volta che si carica la pagina.

+0

Non proprio sicuro di quello che stai chiedendo. Poiché JavaScript è lato client, qualsiasi framework JS può modificare elementi DOM senza dover fare affidamento sul server (a meno che non si stiano utilizzando i servizi per caricare i dati relativi AJAX). Questa è l'idea alla base delle applicazioni a pagina singola: il server invia una vista html che contiene tutti i modelli e il JavaScript esegue il rendering delle viste e manipola l'html. Potresti descrivere un po 'più nello specifico su cosa stai lavorando? – PhillipKregg

risposta

10

che ho fatto qualcosa di simile a quello che penso che stai cercando di fare. Nel mio caso, ho aggiunto la funzionalità di Backbone sopra i moduli esistenti. Ecco un esempio di fascia bassa:

esistente HTML:

<div id="my-app"> 
    <form name="input" action="html_form_action.asp" method="get"> 
    Username: <input type="text" name="user" id="username" /> 
    <input type="submit" value="Submit" /> 
    </form> 
</div> 

Backbone:

var MyFormView = Backbone.View.extend({ 
    events: { 
    "submit form": "formHandler" 
    }, 
    formHandler: function(evt) { 
    evt.preventDefault(); 
    var nameVal = $('#username').val(); 
    this.$el.append('<p>hello: ' + nameVal + '</p>'); 
    } 
}); 

$().ready(function(){ 
    var myForm = new MyFormView({el: "#my-app"}); 
}); 

La chiave sta passando il codice HTML esistente come "el" proprietà quando si crea il tuo punto di vista.

0

Non sono esattamente sicuro di cosa stia lavorando attualmente, ma ho creato un JSFiddle che utilizza solo le Viste Backbone - nessun modello o collezione o router di cui preoccuparsi.

È possibile giocare con questo e vedere come viene caricata la vista della pagina principale nel suo contenitore.

Ecco il violino: http://jsfiddle.net/phillipkregg/tVmTM/71/

1

io non sono sicuro di cosa si intende per un metodo fantasia, ma le vostre opinioni non hanno bisogno di rendere il html per la loro el stessi. È possibile allegare facilmente una vista a un elemento esistente nella pagina assegnandogli semplicemente il numero el. Se si desidera assegnare il proprio punto di vista in un momento successivo (ad esempio si desidera "passare" il suo el), è possibile utilizzare il metodo setElement per farlo. Utilizzando il setElement creerà anche la cache $el e spostarsi su tutti gli eventi legati.

Problemi correlati