レイアウトアプリケーションに最適な方法は？

Question

編集：固定JSFiddleリンク

ので、私は数週間のカップルのため、バックボーンとマリオネットでプレーしてきました。私はUdemyでいくつかのコースを行い、BackboneとMarionetteの両方のドキュメントを読んでいました。私はロジックの大部分を把握することができますが、どういうわけか私が作成しようとしているSPAにアプローチする最善の方法については、私の心が包み込むことができません。

API

だから私はいくつかのデータを返すのREST APIがあります。

http://localhost:3000/index

を次の値を返します。

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

私は

たい何が欲しいですこの応答を使用できるようにするseと2つの別々のビューにそれを設定します。

• つのビューが他のビューには、私はどういうわけか

  を理解するように見えることはできませんどのようなヒーローヘッダ

を作成するためにそれを使用します

ナビゲーションバーを作成するためにデータを使用します私はこれを "非論理的"にすることなく、どのように設定するかについて頭を巡らすことはできません

私は同じモデルの2つのビューを私のMarionette.Application意味がありませんか？または、私のコレクションやモデルをそこに取り込むという事実...

私はいくつかのレイアウト上の問題やベストプラクティスをクリアしておかなければなりません。

私はローカルホストのURLからデータを取得し、私はこれは私が使用しています多かれ少なかれコードでのWebPACKに私のアプリを設定しているという事実に加えて私のコード

：

JSFiddle Demo

Answer 1

私は何をする必要があるかを考え出しました。ドキュメント（それは私を混乱させるものでした）に基づいて、必要なデータが2つのビューをレンダリングする方法を見つけました。

私はCollectionViewを使用して単一のデータポイント（1個のモデル）を読み取っていましたが、ただちに1個のモデルを取得する方法を何とか見つけることができませんでした。

私がしなければならなかったこれまでのモデル：ここurlRoot引数は、私は正確な呼び出しを行うために必要なものである

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

。

私はまだアプリの構造をどうやって混乱していましたが、最終的にアプリケーションをセットアップするのにRegionsとMarionette.Viewを使用しました。私は子ビューをレンダリングする必要がある場所を指定した領域を利用ラッピングAppViewを作成する必要がありました

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

。