Utilizzo dei modelli Backbone con AngularJS

Question

Recentemente stavo pensando alle differenze e alle somiglianze tra Backbone.js e AngularJS.

Quello che trovo davvero conveniente in Backbone sono i Backbone-Models e le Backbone-Collections. Devi solo impostare urlRoot e quindi la comunicazione con il backend-server tramite Ajax funziona fondamentalmente.

Non dovrebbe essere possibile utilizzare solo i modelli Backbone e le raccolte nell'applicazione AngularJS? Quindi avremmo il meglio dei due collegamenti dati bidirezionali con AngularJS e un comodo accesso al lato server (o altre opzioni di archiviazione) tramite i modelli Backbone e le Collezioni.

Una ricerca rapida su Internet non ha generato alcun sito che suggerisca questo scenario di utilizzo. Tutte le risorse parlano dell'utilizzo dell'una o dell'altra struttura.

Qualcuno ha esperienza con l'uso di modelli Backbone o Collezioni con AngularJS. Non si completano bene l'un l'altro? Mi manca qualcosa?

Answer 1

Domanda valida di sicuro.

Lotto di limitazioni con l'implementazione corrente di $ risorsa, che tra l'altro non ha una gestione interna delle raccolte come Backbone.Collection. Avendo scritto il mio stesso livello di raccolta/gestione delle risorse in modo angolare (utilizzando $ http, non $ risorsa), ora sto vedendo se riesco a sostituire gran parte degli interni di boilerplate per collezioni e modelli di backbone.

Finora il recupero e l'aggiunta di parti è impeccabile e consente di risparmiare codice, ma il binding di quei modelli backbone (o degli attributi all'interno, piuttosto) di ng-model sugli input per la modifica non funziona ancora.

@ericclemmons (github) ha fatto la stessa cosa e ha ottenuto i due a sposarsi bene - io gli chiedo, ad avere il mio lavoro di prova, e inserisco la conclusione ...

Answer 2

Mi chiedevo se qualcuno aveva fatto anche questo Nella mia app più recente/prima angolare, ho trovato Angular abbastanza carente in modelli e collezioni (a meno che mi manchi qualcosa ovviamente!). Certo, puoi estrarre i dati dal server usando $ http o $ resource, ma se vuoi aggiungere metodi/proprietà personalizzati ai tuoi modelli o collezioni. Ad esempio, supponiamo di avere una collezione di auto e di voler calcolare il costo totale. Qualcosa di simile a questo:

con una collezione Backbone, questo sarebbe abbastanza facile da implementare:

carCollection.getTotalCost() 

Ma in angolare, si sarebbe probabilmente necessario per avvolgere il vostro metodo personalizzato in un servizio e passare la vostra collezione di In questo modo:

Mi piace l'approccio di Backbone perché a mio parere è più pulito. Tuttavia, ottenere l'associazione dei dati a 2 vie è complicato. Dai un'occhiata a questo esempio di JSBin.

http://jsbin.com/ovowav/1/edit

Quando si modificano i numeri, collection.totalCost solito aggiornamento perché le proprietà car.cost non sono sempre impostati tramite model.set().

Invece, ho utilizzato fondamentalmente i miei costruttori/"classi" per modelli e raccolte, copiato un sottoinsieme di API Backbone da Backbone.Model e Backbone.Raccolta e modifica i miei costruttori/classi personalizzati in modo che possano funzionare con l'associazione dati di Angular.

Answer 3

un lavoro vincolante per esempio di cui sopra ... http://jsbin.com/ivumuz/2/edit

dimostra un modo per lavorare intorno a modelli di Backbone con AngularJS. ma la connessione setters/getter sarebbe meglio.

Answer 4

Prova a dare un'occhiata a restangular.

Non l'ho implementato da nessuna parte, ma ho visto un discorso su alcuni giorni fa. Sembra risolvere lo stesso problema in modo angolare.

video: http://www.youtube.com/watch?v=eGrpnt2VQ3s

Answer 5

ha avuto un'idea simile in mente e si avvicinò con questa idea: aggiungere solo un getter e setter per l'attributo mai il modello.

Backbone.ngModel = Backbone.Model.extend({ 
     initialize: function (opt) { 
     _.each(opt, function (value, key) { 
      Object.defineProperty(this, key, { 
       get: function() { 
        return this.get(key) 
        }, 
       set: function (value) { 
        this.set(key, value); 
       }, 
       enumerable: true, 
       configurable: true 
      }); 
     }, this); 
    } 
}); 

Vedere il violino: http://jsfiddle.net/HszLj/

Answer 6

mi chiedevo il stesso-

Questo è il caso d'uso:

Salesforce sdk cellulare (ibrida) ha una caratteristica chiamata SmartStore/SmartSync , che si aspetta modelli/collezione backbone, che viene salvato nella memoria locale per l'accesso offline.

E avete indovinato, vogliamo utilizzare angularjs per il resto dell'app ibrida.

Domanda valida.

-Sree

Answer 7

Si dovrebbe guardare il boilerplate angularJS con parse here. Parse è come backbone, ma non esattamente backbone. Thats dove im partire la mia idea di un progetto angularJS backboneJS