【问题标题】：Best way to layout application?布局应用程序的最佳方式？
【发布时间】：2017-05-19 11:42:33
【问题描述】：

编辑：修复了 JSFiddle 链接

所以几周以来我一直在玩 Backbone 和 Marionette。我在 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"
    }
]

我想要什么

我希望能够使用此响应并将其填充到 2 个单独的视图中。

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

我似乎无法理解的内容

不知何故，如果不让这个“不合逻辑”，我无法理解如何设置它

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

我需要一些帮助来解决一些布局问题和我猜想的最佳实践。

我的代码

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

JSFiddle Demo

【问题讨论】：

标签： backbone.js views marionette

【解决方案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，它利用区域来指定子视图应呈现的位置。

【讨论】：