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

现在我最大的疑问是如何从这里继续展示旗帜清单？我已经为横幅列表创建了一个collectionview和item视图，但这个程序结构是否正确？

Answer 1

你真的需要marionnete来管理你的应用程序吗？特别是你也像我一样初学者:) 首先尝试纯骨干。您仍然可以使用牵线木偶作为图书馆。骨干MVC架构在许多站点上都得到了很好的描述。

一般骨干/牵线木偶计划结构

1 个答案: