Le meilleur moyen de mettre en application l'application?

Question

Edit: fixe jsFiddle Lien

donc je joue avec Backbone et Marionette depuis quelques semaines. J'ai fait quelques cours sur Udemy, j'ai lu les docs pour Backbone et Marionette. Je peux saisir la majeure partie de la logique, mais d'une manière ou d'une autre mon esprit ne peut pas s'enrouler autour de la meilleure façon d'approcher un SPA que j'essaye de créer.

API

j'ai donc une api de repos qui renvoie certaines données:

http://localhost:3000/index

renvoie les éléments suivants:

[ 
    { 
     "id": 1, 
     "magazineTitle": "Title", 
     "magazineEditie": "Date", 
     "indexTitle": "Index Title", 
     "indexSubtitle": "Index Subtitle", 
     "mediaType": "image", //can also be "video" 
     "mainMedia": "https://source.unsplash.com/B0iF3I4bLBQ" 
    } 
] 

Ce que je veux

Je veux être capable d'utiliser ce respon se et peuplent plus de 2 vues séparées.

• une vue utilisera les données pour créer une barre de navigation
• l'autre point de vue utilisera pour créer un en-tête de héros

Ce que je ne peux pas sembler comprendre

D'une certaine façon Je ne peux pas envelopper ma tête autour de la façon dont cela serait mis en place sans rendre ce «illogique»

J'ai envie de charger 2 vues avec le même modèle dans mon Marionette.Application n'a aucun sens? Ou le fait que j'y prenne mes collections et/ou modèles ...

J'ai besoin d'aide pour résoudre certains problèmes de mise en page et les meilleures pratiques.

Mon code

Outre le fait que j'obtenir les données d'une url localhost et j'ai ma configuration de l'application avec webpack ce qui est plus ou moins le code que j'utilise:

JSFiddle Demo

Answer 1

J'ai compris ce que j'avais besoin de faire. Sur la base de la documentation (qui était en quelque sorte me confondre), j'ai trouvé un moyen de rendre deux vues avec ses données nécessaires.

J'utilisais une CollectionView pour lire un seul point de données (1 modèle) Je n'arrivais pas à trouver un moyen d'obtenir immédiatement un seul modèle.

Jusqu'à présent, le modèle que je devais faire:

index.model.js

const IndexModel = Backbone.Model.extend({ 
    urlRoot: "http://localhost:3000/index", 
    default: { 
     id: 1, 
     magazineTitle: "Mag Title", 
     magazineEditie: "Date", 
     indexTitle: "Title", 
     indexSubtitle: "Subtitle", 
     mediaType: "image", 
     mainMedia: "http://placehold.it/1900x800/", 
    }, 
}); 

L'argument URLRoot est ici ce que je dois faire l'appel exact.

Ensuite, j'étais encore confus comment structurer mon application, mais j'ai finalement utilisé Regions et Marionette.View pour configurer l'application.

app.js

export default Marionette.Application.extend({ 
    region: "#content", 

    onBeforeStart() { 
     const router = new Router(); 
    }, 

    onStart() { 
     this.showView(new AppView()); 
    }, 
}); 

app.view.js

const AppView = Marionette.View.extend({ 
    tagName: "main", 
    id: "app", 
    template: template, 
    regions: { 
     navigationRegion: "#main-navigation", 
     appRegion: "#main-region", 
     pagesRegion: "#pages-region", 
    }, 

    initialize() { 
     this.headerData = new IndexModel({ id: 1 }); 
     this.pagesData = new PagesCollection(); 
    }, 

    onRender() { 
     this.showChildView("appRegion", new HeroView({ model: this.headerData, })); 
     this.showChildView("pagesRegion", new PagesView({ collection: this.pagesData, })); 
    }, 
}); 

je devais créer un AppView emballage qui utilise des régions pour spécifier où les vues des enfants devraient rendre.