一般主干/牵线木偶程序结构

general backbone/marionette program structure

本文关键字：程序 结构      更新时间：2023-09-26

我需要一些关于如何构建主干/牵线木偶应用程序的一般指南。我对这些框架和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'
    }
});

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

您真的需要marionnete来管理您的应用程序吗?特别是你和我一样是初学者:)先试试纯脊骨。你仍然可以把木偶当作图书馆。主干MVC架构在很多站点都有完美的描述。

相关文章：