backbone.js la structuration de vues imbriquées et modèles

À l'aide de backbone.js:

J'ai un haut niveau de ModelA qui contient 2 attributs et 2 modèles imbriqués, ModelB et ModelC. ModelB et ModelC ont chacun 2 attributs comme suit:

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

Il y a un ViewA pour ModelA, et un ViewB pour ModelB.
ViewA render fonction place un nouveau div sur le corps, tandis que ViewB rendu d'crée un h1. ViewA de l'initialisation des appels ViewB de rendu pour insérer le h1 dans le nouveau div. La raison de cette séparation est que le h1 peut changer et besoin d'un re-rendu indépendant de ViewA.

ViewA
    initialise: 
        //call ViewA's own render function
        this.render() 

        //call ViewB's render function that further modifies the $("#new") div created earlier.
        $("#new").append(ViewB.render().el)

    //ViewA's own render function
    render: //place <div id="new"></div> onto 'body'

ViewB
    render: //create a <h1></h1>
    funcB1: //can this access it's parent ModelA's attributes and other objects?

Q1: ViewB a une fonction funcB1. Cette fonction d'accès: c'est parent du modèle d'attributs? Les attributs tels que la attributeA1, ou même attributeC1 (ce qui serait un frère ou une sœur/cousine)?

T2: une autre extension de T1, peut funcB1 accéder aux éléments du DOM associés à ViewA? (dans cet exemple, le #new div?)

Q3: En général, comment puis-je définir les associations entre les Vues et les Modèles décrits ci-dessus, de sorte que tout relie correctement?

Je me rends compte que cette question est un peu abstrait, mais de toute reconnaissant de toute aide ou des lignes directrices apprécié.

Avez-vous essayé d'écrire des tests pour voir si les réponses à vos questions?
J'ai essayé de jouer avec un peu de code pour les T1 et T2, mais ne pouvait pas les faire travailler. J'ai pensé que la meilleure façon de poser cette question a été juste en pseudo-code et permettre au plus js-versé gars là-bas pour me pointer dans la bonne direction.
Je vous suggère de vous écrire séparer les questions avec le défaut de code, de sorte que js programmeurs peuvent pointer ce qui ne va pas.
Bien sûr, c'est juste, je vais essayer d'écrire un peu. En tout cas, si quelqu'un veut encore fournir d'informations toujours la bienvenue!
Voici un lien (bien que plus générique) question & réponse longue pour plus de perspicacité sur ce point: stackoverflow.com/questions/10077185/...

InformationsquelleAutor fortuneRice | 2011-06-15

backbone.js javascript

73

Pour être en mesure d'atteindre les attributs sur les modèles, le modèle doit avoir un certain type de connaissances à propos de ce modèle est de. Backbone.js ne pas implicitement traitent de relations ou de nidification, ce qui signifie que vous devez vous assurez-vous que les modèles ont connaissance les uns des autres. Pour répondre à vos questions, une seule façon de le faire est de s'assurer que chaque enfant a un "parent" de l'attribut. De cette façon, vous pouvez parcourir la nidification d'abord à la mère, puis vers le bas à tous les frères et sœurs que vous connaissez.

Pour être plus précis avec vos questions. Lors de l'initialisation de modelA, vous êtes probablement la création d'modelB et modelC, je voudrais vous suggérons de définir un lien vers le modèle parent lorsque vous faites cela, comme ceci:
```
ModelA = Backbone.Model.extend({

    initialize: function(){
        this.modelB = new modelB();
        this.modelB.parent = this;
        this.modelC = new modelC();
        this.modelC.parent = this;
    }
}
```
De cette façon, vous pouvez rejoindre la mère modèle dans un modèle de l'enfant en fonction de l'appel de cette.parent.

Concernant votre point de vue, lorsque vous faites des imbriquée épine dorsale points de vue, je trouve plus facile de laisser chaque vue représentent une balise HTML en utilisant le nom de balise option de la vue. Je voudrais écrire votre point de vue comme ceci:
```
ViewA = Backbone.View.extend({

    tagName: "div",
    id: "new",

    initialize: function(){
       this.viewB = new ViewB();
       this.viewB.parentView = this;
       $(this.el).append(this.viewB.el);
    }
});

ViewB = Backbone.View.extend({

    tagName: "h1",

    render: function(){
        $(this.el).html("Header text"); //or use this.options.headerText or equivalent
    },

    funcB1: function(){
        this.model.parent.doSomethingOnParent();
        this.model.parent.modelC.doSomethingOnSibling();
        $(this.parentView.el).shakeViolently();
    }

});
```
Puis dans votre demande de code d'initialisation (par exemple dans votre contrôleur), je voudrais lancer ViewA et le lieu de son élément à l'intérieur de l'élément body.
- merci @Jens cela a été utile.
- J'ai une question si je peut. Lors de la création de modelB dans le initialize méthode de ModelA au début de votre réponse, devrait-il être défini par this.set('modelB') = new ModelB(); ou il ok de ne pas utiliser la méthode setter dans ce cas?
- Vous pouvez utiliser la méthode setter si vous voulez que la relation dans le modèle d'attributs (par exemple, pour être en mesure de lier les événements de changement). La syntaxe pour que ne serait-ce.set({modelB: nouvelle ModelB()}). Toutefois, si vous voulez faire plus complexe de la relation-mappings, je recommande fortement la colonne vertébrale-relationnel par Paul Uhitol ou une autre relation de mappage de plugin pour backbone.js.
- Existe-il des fuites de mémoire en raison du fait que cela crée une référence circulaire?
- Bon commentaire, me fait revenir sur cette réponse. Bonne GC gère les références circulaires assez bien, mais je ne suis pas sûr de savoir comment IE8 poignées (elle est sujette à des fuites de mémoire, mais surtout en js<->DOM accouplements, utiliser une librairie comme jQuery pour les DOM-manipulation!).Dans mon code que j'utilise
- Dans mon code j'utilise épine dorsale relationnelles pour une approche plus globale. Pour gérer les points de vue liés aux modèles, j'ai l'habitude de lier un point de vue.supprimer pour le "détruire" l'événement de la limite de modèle et de remplacer les supprimer-fonction de faire tout déliaison là pour éviter les fuites de mémoire de fonctions liées. J'ai aussi retirer tous les enfants de vues en cascade sur supprimer. Je ne pense pas que cela conduit à des fuites de mémoire autre que, éventuellement, dans IE8, mais je n'ai pas profilées il. Watch out pour les DOM-connexions dans le point de vue cependant.
- D'un point de vue que les bâtons en raison de DOM-références peuvent garder le nid de modèles dans la mémoire et qui pourrait facilement devenir très fuit!
- Veuillez noter que votre ajout de B. el-A. el dans votre méthode initialize serait assommé si ViewA avait une méthode de rendu; votre exemple ne fonctionne que parce que le parent est un rendu de moins point de vue.
- Certes, c'est une mise en garde. - Je l'utiliser pour le contrôleur comme point de vue
InformationsquelleAutor Jens Alm
3

La réponse générale à la question "puis-je" est toujours "oui, tant que vous êtes prêt à écrire le code." Le point de base est de fournir une forte séparation de modèle et la vue. Si B1 est une référence à A1 et A1 a une référence à C1, puis vous êtes capable de créer les méthodes et les règles qui l'B1 peut modifier A1 et C1, et ainsi de suite.

Le point de vue doit être configuré pour recevoir des CRUD des événements à partir de leurs modèles respectifs. Si l'utilisateur fait quelque chose avec B1view qui modifie B1model, et B1model à son tour modifie A1model, puis A1model doit générer un événement qui A1view reçoit et provoque un nouveau rendu de A1view, et ainsi de suite. Cela devrait se passer comme par magie. (Dans la pratique, il faut un certain temps pour obtenir la magie, mais j'ai trouvé d'épine Dorsale pour être vraiment puissant. Et BackboneRelational aide avec des choses comme ce que vous décrivez ici.)
- merci. Je pense qu'une réponse plus précise à qui doit être "oui, tant que vous êtes prêt et mesure écrire le code"!
InformationsquelleAutor Elf Sternberg
3

La solution ci-dessus est sur la bonne voie, mais a quelques problèmes.
```
initialize: function(){
  this.viewB = new ViewB();
  this.viewB.parentView = this;
  $(this.el).append(this.viewB.el);    
}
```
Surtout, le modèle de la méthode toJSON() retourne maintenant des données périmées. J'ai posté une solution pour résoudre ce problème dans un backbone.js plugin. Vous êtes les bienvenus.

InformationsquelleAutor geddesign

Vous pouvez utiliser des extensions, de la colonne vertébrale-Formes https://github.com/powmedia/backbone-forms par exemple. Pour suivre votre cas d'utilisation, de définir un schéma comme:

var ModelB = Backbone.Model.extend({
    schema: {
        attributeB1: 'Text',
        attributeB2: 'Text'
    }
});

var ModelC = Backbone.Model.extend({
    schema: {
        attributeC: 'Text',
    }
});

var ModelA = Backbone.Model.extend({
    schema: {
        attributeA1: 'Text',
        attributeA2: 'Text',
        refToModelB: { type: 'NestedModel', model: ModelB, template: 'templateB' },
        refToModelC: { type: 'NestedModel', model: ModelC, template: 'templateC' }
    }
});

Regarder https://github.com/powmedia/backbone-forms#customising-templates partielle des modèles.

Parties importantes ici sont type: 'NestedModel' et template: 'templateXXX'.

Ce plugin a quelques limitations, mais vous pouvez regarder les autres à https://github.com/documentcloud/backbone/wiki/Extensions%2C-Plugins%2C-Resources.

InformationsquelleAutor Artem Oboturov

0

Il est l'épine dorsale du plugin Backbone-relational.js qui offre un-à-un, un-à-plusieurs et plusieurs-à-un les relations entre les modèles de base.

Je pense que c'js va répondre à vos besoins.
Vist BackboneRelational pour plus de documentation.

InformationsquelleAutor Gagan

Vous devez vous connecter pour publier un commentaire.