一般骨干/木偶程序结构

Question

我需要一些关于如何构建主干/牵线木偶应用程序的通用指南。我对这些框架以及一般的 js 都很陌生。

基本上我有两个页面，每个页面都有一个列表。我已经为该应用设置了一个应用和一个路由器：

var app = new Backbone.Marionette.Application();

app.module('Router', function(module, App, Backbone, Marionette, $, _){
    module.AppLayoutView = Marionette.Layout.extend({
        tagName: 'div',

        id: 'AppLayoutView',

        template: 'layout.html',

        regions: {
            'contentRegion' : '.main'
        },

        initialize: function() {
            this.initRouter();
        },

        ...
    });

    module.addInitializer(function() {
        var layout = new module.AppLayoutView();

        app.appRegion.show(layout);
    });
});

在 initRouter 中，我有两个函数，一个用于由路由器根据 url 调用的每个页面。

内容管理页面的功能如下：

onCMNavigated: function(id) {
    var cMModule = App.module("com");
    var cM = new cMModule.ContentManagement({id: id, region: this.contentRegion});
    contentManagement.show();

    this.$el.find('.nav-item.active').removeClass('active');
    this.cM.addClass('active');
}

所以如果调用它，我会创建一个新的 ContentManagement 模型实例。在这个模型中，当调用 show() 时，我从一个 rest api 获取数据，并解析出需要在列表视图中显示的横幅数组。那样可以么？该模型如下所示：

cm.ContentManagement = Backbone.Model.extend({

    initialize: function (options) {
        this.id = options.id;
        this.region = options.region;
    },

    show: function() {
       var dSPage = new DSPage({id: this.id});

       dSPage.bind('change', function (model, response) {
          var view = new cm.ContentManagementLayoutView();

          this.region.show(view);
       }, this);

       dSPage.fetch({
         success: function(model, response) {
            // Parse list of banners and for each create a banner model
         }
    }
});

cm.ContentManagementLayoutView = Marionette.Layout.extend({
    tagName: 'div',

    id: 'CMLayoutView',

    className: 'contentLayout',

    template: 'contentmanagement.html',

    regions: {
        'contentRegion' : '#banner-list'
    }
});

现在我最大的疑问是如何从这里继续显示横幅列表？我已经为横幅列表创建了一个集合视图和项目视图，但是这个程序结构是否正确？

Answer 1

您真的需要 marionnete 来管理您的应用程序吗？特别是你和我一样是初学者:) 首先尝试纯骨干。您仍然可以将木偶用作图书馆。 许多网站都完美地描述了主干 MVC 架构。