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

Question

À 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)?

Q2: 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é.

Answer 1

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 de corps.

Answer 2

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.)

Answer 3

La solution ci-dessus est sur la bonne voie, mais a quelques problèmes.

Principalement, toJSON() du modèle retourne maintenant des données périmées. J’ai posté une solution pour résoudre ce problème dans un plugin backbone.js. Nous vous invitons à l’utiliser.

Answer 4

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.

Des 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.

Answer 5

Il n’y a plugin épine dorsale dorsale-relational.js, qui fournit un à un, un-à-plusieurs et des relations plusieurs-à-un entre les modèles de colonne vertébrale.

Je pense que ce js répondra à vos besoins. Visitez BackboneRelational pour plus d’information.