API

Question

修改：修正了JSFiddle链接

所以我几周以来一直在玩Backbone和Marionette。我在Udemy做过一些课程，阅读Backbone和Marionette的文档。我可以掌握大部分逻辑，但不知怎的，我的思想无法绕过我想要创建的SPA的最佳方式。

API

所以我有一个返回一些数据的休息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"
    }
]

我想要什么

我希望能够使用此响应，并在2个单独的视图中填充它。

一个视图将使用该数据创建导航栏
另一个视图将使用它来创建英雄标题

我似乎无法理解

不知怎的，我无法理解如何在不使这种“不合逻辑”的情况下设置它

我觉得在Marionette.Application内加载2个相同模型的视图没有任何意义？或者我在那里获取我的收藏品和/或模型......

我需要一些帮助来清理一些布局问题和最佳实践。

我的代码

除了我从localhost网址获取数据并且我使用webpack设置了我的应用程序之外，这或多或少都是我正在使用的代码：

JSFiddle Demo

Answer 1

我已经弄明白了我需要做什么。根据文档（这让我感到困惑），我想出了一种方法，用它来呈现两个视图所需的数据。

我使用CollectionView读取单个数据点（1个模型）我无法找到立即获得单个模型的方法。

到目前为止我必须做的模型：

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

这里的urlRoot参数是完成调用所需要的。

然后我仍然对如何构建应用程序感到困惑，但我最终使用Regions和Marionette.View来设置应用程序。

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

我必须创建一个包装AppView，它利用区域来指定子视图应该呈现的位置。

布局应用程序的最佳方式是什么？

API