Utilisation de modèles Backbone avec AngularJS

Question

Récemment, j'ai réfléchi aux différences et aux similitudes entre Backbone.js et AngularJS.

Ce que je trouve vraiment pratique dans Backbone, ce sont les Backbone-Models et les Backbone-Collections. Il suffit de définir l'urlRoot pour que la communication avec le serveur dorsal via Ajax fonctionne.

Ne devrait-il pas être possible d'utiliser uniquement les Backbone-Models et les Collections dans une application AngularJS ? Ainsi, nous aurions le meilleur des deux mondes : liaison de données bidirectionnelle avec AngularJS et accès pratique au côté serveur (ou à d'autres options de stockage) grâce à Backbone-Models et Collections.

Une recherche rapide sur Internet n'a pas permis de trouver de site suggérant ce scénario d'utilisation. Toutes les ressources parlent de l'utilisation de l'un ou l'autre cadre.

Quelqu'un a-t-il de l'expérience dans l'utilisation de Backbone-Models ou de Collections avec AngularJS. Ne se compléteraient-ils pas joliment ? Est-ce qu'il me manque quelque chose ?

Answer 1

Une fixation de travail pour l'exemple ci-dessus... http://jsbin.com/ivumuz/2/edit

Il démontre une façon de travailler autour des modèles Backbone avec AngularJS. mais la connexion setters/getters serait mieux.

Answer 2

J'avais une idée similaire en tête et j'ai trouvé cette idée : Ajouter juste un getter et un setter pour chaque attribut du modèle.

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

Voir le violon : http://jsfiddle.net/HszLj/

Answer 3

Je me demandais si quelqu'un avait fait la même chose. Dans ma toute dernière / première application angulaire, j'ai trouvé qu'Angular manquait cruellement de modèles et de collections (à moins que je ne manque quelque chose, bien sûr !). Bien sûr, vous pouvez tirer des données du serveur en utilisant $http ou $resource, mais que faire si vous voulez ajouter des méthodes personnalisées / propriétés à vos modèles ou collections. Par exemple, disons que vous avez une collection de voitures, et que vous voulez calculer le coût total. Quelque chose comme ceci :

Avec une collection Backbone, cela serait assez facile à mettre en œuvre :

carCollection.getTotalCost()

Mais en Angular, vous devrez probablement envelopper votre méthode personnalisée dans un service et lui passer votre collection, comme ceci :

carCollectionService.getTotalCost(carCollection)

J'aime l'approche Backbone parce qu'à mon avis, elle se lit plus proprement. L'obtention de la liaison de données bidirectionnelle est cependant délicate. Regardez cet exemple JSBin.

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

Lorsque vous modifiez les chiffres, collection.totalCost ne sera pas mis à jour car les propriétés car.cost ne sont pas définies via model.set().

Au lieu de cela, j'ai essentiellement utilisé mes propres constructeurs/"classes" pour les modèles et les collections, j'ai copié un sous-ensemble de l'API de Backbone à partir de Backbone.Model et Backbone.Collection, et j'ai modifié mes constructeurs/classes personnalisés pour qu'ils fonctionnent avec la liaison de données d'Angular.

Answer 4

Essayez de jeter un coup d'œil à restangulaire .

Je ne l'ai mis en œuvre nulle part, mais j'ai vu un exposé à ce sujet il y a quelques jours. Elle semble résoudre le même problème d'une manière angulaire.

Vidéo : http://www.youtube.com/watch?v=eGrpnt2VQ3s

Answer 5

Une question valable pour sûr.

Beaucoup de limitations avec l'implémentation actuelle de $resource, qui entre autres n'a pas de gestion de collection interne comme Backbone.Collection. Ayant écrit ma propre couche de gestion de collection/ressource en angulaire (en utilisant $http, pas $resource), je vois maintenant si je peux substituer une grande partie des internes boilerplate pour les collections et modèles Backbone.

Jusqu'à présent, l'extraction et l'ajout sont parfaits et permettent d'économiser du code, mais la liaison de ces modèles dorsaux (ou plutôt des attributs qu'ils contiennent) à des modèles ng sur les entrées pour les modifier ne fonctionne pas encore.

@ericclemmons (github) a fait la même chose et a réussi à marier les deux - je vais lui demander, faire fonctionner mon test et poster la conclusion...