[javascript] backbone.js strukturiert verschachtelte Ansichten und Modelle


Answers

Die allgemeine Antwort auf die Frage "Kann ich" ist immer "Ja, solange Sie bereit sind, den Code zu schreiben." Der hinter Backbone stehende Punkt ist eine starke Trennung von Modell und Ansicht. Wenn B1 einen Verweis auf A1 hat und A1 einen Verweis auf C1 hat, können Sie Methoden erstellen und die Regeln festlegen, nach denen B1 A1 und C1 usw. ändern kann.

Die Ansichten sollten so eingerichtet sein, dass sie CRUD-Ereignisse von ihren jeweiligen Modellen empfangen. Wenn der Benutzer etwas mit B1view tut, das B1model ändert, und B1model seinerseits A1model ändert, dann sollte A1model ein Ereignis generieren, das A1view empfängt und ein erneutes Rendern von A1view verursacht, und so weiter. Es sollte wie Magie geschehen. (In der Praxis dauert es eine Weile, bis die Magie stimmt, aber ich finde, dass Backbone wirklich mächtig ist. Und BackboneRelational hilft bei Dingen wie dem, was du hier beschreibst.)

Question

Verwenden von backbone.js:

Ich habe eine Top-Level-ModelA, die 2 Attribute und 2 verschachtelte Modelle enthält, ModelB und ModelC. ModelB und ModelC haben jeweils zwei Attribute:

ModelA
    attributeA1
    attributeA2
    ModelB
        attributeB1
        attributeB2
    ModelC
        attributeC1
        attributeC2

Es gibt ein ViewA für ModelA und ein ViewB für ModelB. Die Renderfunktion von ViewA platziert ein neues div auf den Körper, während das Rendering von ViewB ein h1 erstellt. ViewAs Initialisierung ruft ViewBs Render auf, um h1 in das neue div einzufügen. Der Grund für diese Trennung ist, dass sich das h1 ändern kann und unabhängig von ViewA erneut gerendert werden muss.

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 hat eine Funktion funcB1. Kann diese Funktion auf die Attribute des übergeordneten Modells zugreifen? Attribute wie AttributA1 oder sogar AttributC1 (was wäre ein Geschwister / Cousin)?

F2: Kann funcB1 als weitere Erweiterung von Q1 auf die mit ViewA verbundenen DOM-Elemente zugreifen? (In diesem Beispiel ist das #new div?)

F3: Wie definiere ich im Allgemeinen die Assoziationen zwischen den Ansichten und den Modellen, wie oben beschrieben, damit alles gut zusammenpasst?

Ich weiß, dass diese Frage etwas abstrakt ist, aber alle schätzen jede Hilfe oder Richtlinien schätzen.




Sie können zum Beispiel einige Erweiterungen, Backbone-Forms https://github.com/powmedia/backbone-forms . Um Ihrem Anwendungsfall zu folgen, definieren Sie ein Schema wie:

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

Sehen Sie sich https://github.com/powmedia/backbone-forms#customising-templates für Teilvorlagen an.

Wichtige Teile sind hier type: 'NestedModel' und template: 'templateXXX' .

Dieses Plugin hat einige Einschränkungen, aber Sie können sich andere unter https://github.com/documentcloud/backbone/wiki/Extensions%2C-Plugins%2C-Resources ansehen.






Links