Der beste Weg zum Layout-Anwendung?

Question

Edit:

JSFiddle Link-Fest

Also habe ich mit Backbone und Mario seit ein paar Wochen gespielt worden. Ich habe ein paar Kurse über Udemy gemacht und die Dokumente für Backbone und Marionette gelesen. Ich kann den größten Teil der Logik verstehen, aber irgendwie kann sich mein Geist nicht darum kümmern, wie er sich am besten einem SPA nähert, den ich erstellen möchte.

API

So habe ich einen Rest api, die einige Daten zurückgibt:

http://localhost:3000/index

gibt die folgende:

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

Was ich

will ich will in der Lage sein, diese Antwort zu verwenden se und bevölkern es über 2 verschiedene Ansichten.

• eine Ansicht werden die Daten verwenden, um eine Navigationsleiste
• die andere Ansicht erstellen wird es verwenden, um ein Held Header erstellen

Was kann ich nicht scheinen,

Irgendwie zu verstehen Ich kann meinen Kopf nicht darum wickeln, wie dies eingerichtet würde, ohne dies "unlogisch" zu machen

Ich fühle mich wie 2 Ansichten mit dem gleichen Modell innerhalb meinerzu ladenmacht keinen Sinn? Oder die Tatsache, dass ich meine Sammlungen und/oder Modelle dort holen ...

Ich brauche Hilfe einige Layout-Probleme Aufräumen und Best Practices, denke ich.

Mein Code

Neben der Tatsache, dass ich die Daten von einer lokalen Host-URL zu bekommen, und ich habe meinen App-Setup mit webpack das ist mehr oder weniger der Code, den ich verwende:

JSFiddle Demo

Answer 1

Ich habe herausgefunden, was ich tun muss. Basierend auf der Dokumentation (die mich irgendwie verwirrte) fand ich heraus, wie man zwei Ansichten mit den benötigten Daten rendern kann.

ich eine Collection mit Figur, die ich könnte einen einzelnen Datenpunkt (1 Modell) zu lesen, irgendwie keinen Ausweg, um sofort ein einziges Modell zu bekommen.

weit das Modell So hatte ich zu tun:

index.model.js hier

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/", 
    }, 
}); 

Das UrlRoot Argument ist das, was ich den genauen Aufruf tun müssen.

Dann war ich noch verwirrt, wie meine App zu strukturieren, aber ich verwendete schließlich Regions und Marionette.View, um die Anwendung einzurichten.

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

ich eine Verpackung AppView zu schaffen hatte, die Regionen, in denen Ansichten darstellen soll Kind angeben, verwendet.