Verwendung von Backbone-Modellen mit AngularJS

Question

Kürzlich habe ich über die Unterschiede und Gemeinsamkeiten zwischen Backbone.js und AngularJS nachgedacht.

Was ich im Backbone sehr praktisch finde, sind die Backbone-Modelle und die Backbone-Collections. Sie müssen nur den URLRoot setzen und dann funktioniert die Kommunikation mit dem Backend-Server über Ajax grundsätzlich.

Sollte es nicht möglich sein, nur die Backbone-Modelle und Collections in AngularJS zu verwenden? Wir hätten also das Beste aus zwei Welten: Datenbindung mit AngularJS und bequemen Zugriff auf die Server-Seite (oder andere Speicheroptionen) über Backbone-Modelle und Collections.

Eine schnelle Internetsuche ergab keine Seite, die dieses Nutzungsszenario vorschlug. Alle Ressourcen sprechen entweder über die Verwendung des einen oder des anderen Frameworks.

Hat jemand Erfahrung mit Backbone-Modellen oder Collections mit AngularJS. Würden sie sich nicht gut ergänzen? Fehle ich etwas?

Answer 1

gültige Frage sicher.

Viele Einschränkungen mit der aktuellen Implementierung von $ Ressource, die unter anderem keine interne Sammlungsverwaltung wie Backbone.Collection hat. Nachdem ich meine eigene Sammlung/Ressourcenverwaltungsschicht in eckiger Form geschrieben habe (unter Verwendung von $ http, nicht $ resource), sehe ich jetzt, ob ich einen Großteil der Standard-Interna für Backbone-Sammlungen und -Modelle ersetzen kann.

Bis jetzt ist das Holen und Hinzufügen von Teilen fehlerlos und speichert Code, aber das Binden dieser Backbone-Modelle (oder der Attribute innerhalb, eher) an ng-Modelle auf Eingaben zur Bearbeitung funktioniert noch nicht.

@ericclemmons (Github) hat das gleiche getan und bekam die beiden gut zu heiraten - ich ihn fragen werde, meine Testarbeits bekommen und postest den Abschluss ...

Answer 2

ich mich gefragt, ob jemand hatte das auch getan. In meiner neuesten/ersten eckigen App fand ich, dass Angular in Modellen und Sammlungen ziemlich fehlte (es sei denn, ich vermisse etwas natürlich!). Sicher können Sie Daten vom Server mit $ http oder $ resource abrufen, aber was ist, wenn Sie Ihren Modellen oder Sammlungen benutzerdefinierte Methoden/Eigenschaften hinzufügen möchten. Angenommen, Sie haben eine Sammlung von Autos und möchten die Gesamtkosten berechnen. Etwas wie folgt aus:

Mit einer Backbone-Kollektion, dies wäre ziemlich einfach zu implementieren sein:

carCollection.getTotalCost() 

Aber in Angular, dann würden Sie wahrscheinlich Ihre eigene Methode in einem Dienst wickeln müssen und übergeben Sie Ihre Sammlung es, wie folgt:

carCollectionService.getTotalCost(carCollection) 

Ich mag den Backbone-Ansatz, weil es meiner Meinung nach sauberer liest. Die 2-Wege-Datenbindung ist jedoch schwierig. Sehen Sie sich dieses JSBin-Beispiel an.

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

Wenn Sie die Zahlen bearbeiten, collection.totalCost wird nicht aktualisiert werden, da die car.cost Eigenschaften() nicht über model.set gesetzt zu werden.

Stattdessen verwendete ich im Grunde meine eigenen Konstruktoren/"Klassen" für Modelle und Sammlungen, kopierte eine Teilmenge von Backbones API aus Backbone.Model und Backbone.Sammlung und modifizierte meine benutzerdefinierten Konstruktoren/Klassen, so dass es mit Angulars Datenbindung arbeiten würde.

Answer 3

ein Arbeits zum Beispiel über die Bindung ... http://jsbin.com/ivumuz/2/edit

es zeigt einen Weg für mit AngularJS um Backbone Model arbeiten. aber Setter/Getter Verbindung wäre besser.

Answer 4

Werfen Sie einen Blick auf restangular.

Ich habe es nirgendwo implementiert, aber ich sah ein Gespräch vor ein paar Tagen. Es scheint das gleiche Problem auf eine eckige Weise zu lösen.

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

Answer 5

hat eine ähnliche Idee im Kopf und kam mit dieser Idee: hinzufügen nur einen Getter und Setter für immer Modellattribut.

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

Siehe Geige: http://jsfiddle.net/HszLj/

Answer 6

ich den gleichgeschlechtlich

Dies ist die Use-Case frage mich:

Salesforce Mobile SDK (Hybrid) hat eine Funktion namens Smartstor/SmartSync , die Backbone-Modelle/Sammlung erwartet, die für den Offline-Zugriff in lokalem Speicher gespeichert werden.

Und Sie haben es richtig geraten, wir wollen angularjs für den Rest der Hybrid-App verwenden.

gültige Frage.

-Sree

Answer 7

Sie am AngularJS vorformulierten mit Parse here aussehen sollte. Parse ist Rückgrat ähnlich, aber nicht genau Backbone. Das ist, wo ich meine Idee von einem angularJS BackboneJS Projekt starten