Marionette.js form Sublime Text templates

application.js

AppManager.module('${1:AppName}App', function (${1:AppName}App, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    var controllers = [
        createView: function () {
            return new Marionette.ItemView({
                template: _.template('<p style="color:red">Empty content</p>'),
                title: '${2:Неизвестный раздел}',
                model: new Backbone.Model()
            })
        }
    ]

    var displaySectionViews = function (collection) {

        var sectionList = new AppManager.Views.BoxList({
            collection: collection
        })

        AppManager.content.show(sectionList)
    }

    var createViewList = function () {
        var viewPromises = requestListViews().reverse()
        var appendView = function (view) {
            var next = viewPromises.pop()
            view.model.view = view
            collection.add(view.model)
            if (next) \$.when(next).done(appendView)
        }
        
        var collection = new Backbone.Collection()
        displaySectionViews(collection)

        \$.when(viewPromises.pop()).done(appendView)
    }

    var requestListViews = function () {
        var viewPromises = []
        _.each(controllers, function (controller) {
            viewPromises.push(controller.createView())
        })

        return viewPromises
    }

    var API = {

        show${1:AppName}Form: function (id) {
            AppManager.request('document:set:id', id)
            createViewList()
        }
    }

    ${1:AppName}App.Router = Marionette.AppRouter.extend({
        appRoutes: {
            '${1/./\L$&/g}/:id': 'show${1:AppName}Form'
        }
    })

    AppManager.addInitializer(function () {
        new ${1:AppName}App.Router({
            controller: API
        })
    })

    AppManager.on('document:${1/./\L$&/g}:show', function (id) {
        API.show${1:AppName}Form(id)
        AppManager.navigate('${1/./\L$&/g}/' + id)
    })
})

controller.js

AppManager.module('${1:AppName}App.Controllers', function (Controllers, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    var request = function (data) {
        return AppManager.request('${1/./\L$&/g}:${2/./\L$&/g}:entity', data)
    }

    var View = AppManager.${1:AppName}App.Views.${2:PartName}
    var createView = function (model) {
        var view = new View({
            model: model,
            title: '${3:Заголовок}'
        })

        view.on('save', function () {
            var data = view.serialize()
            request(data)
        })

        return view
    }

    Controllers.${2:PartName} = {
        createView: function () {
            var fetchedData = request()
            return \$.when(fetchedData).then(createView)
        }
    }

})

entity.js

AppManager.module('${1:AppName}App.Entities', function (Entities, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    var sectionName = '${2:Название секции}'

    var fetchData = function () {
        return AppManager.request('document:partial', sectionName)
    }

    var saveData = function (data) {
        return AppManager.request('document:update', sectionName, data)
    }

    var API = {

        get${3:Entity}: function () {
            var fetchedData = fetchData()
            return \$.when(fetchedData).then(function (data) {
                return new Backbone.Model(data)
            })
        },

        save${3:Entity}: function (data) {
            return saveData(data)
        }
    }

    AppManager.reqres.setHandler('${1/./\L$&/g}:${3/./\L$&/g}:entity', function (data) {
        if (_.isObject(data)) return API.save${3:Entity}(data)
        else return API.get${3:Entity}()
    })
})

nestedController.js

AppManager.module('${1:AppName}App.Controllers', function (Controllers, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    var request = function () {
        return AppManager.request('${1/./\L$&/g}:${2/./\L$&/g}:entity')
    }

    var View = AppManager.${1:AppName}App.Views.${2:PartName}
    var createView = function (${3:model}) {
        var view = new View({
            ${3:model}: ${3:model}
        })

        return view
    }

    Controllers.${2:PartName} = {
        showOn: function (canvas) {
            var fetchedData = request()
            \$.when(fetchedData).done(function (${3:model}) {
                var view = createView(${3:model})
                canvas.show(view)
            })
        }
    }
})

serializer.js

AppManager.module('${1:AppName}App.Views', function (Views, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    var Serializer = AppManager.Views.Serializer.extend({

        ui: {

            // TODO: Prepare UI nodes here...

        },

        serialize: function () {
            var data = {

                // TODO: Collect data from UI here...
                
            }

            return data
        }
    })

   Serializer.bindView(Views.${2:ViewName})
})

tableView.js

AppManager.module('${1:AppName}App.Views', function (Views, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    Views.${2:ViewName} = Marionette.ItemView.extend({

        tagName: 'tr',

        template: '#forms-${1/./\L$&/g}-${2/./\L$&/g}-template'
    })

    Views.${2:ViewName}Edit = Marionette.ItemView.extend({

        tagName: 'tr',

        className: 'add-row',

        template: '#forms-${1/./\L$&/g}-${2/./\L$&/g}-edit-template',

        ui: {

            // TODO: UI Elements here...

        },

        events: {
            'change': 'updateModel'
        },

        onRender: function () {

            // TODO: Initialize UI Elements here...

            this.updateModel()
        },

        updateModel: function () {
        
            var obj = {

                // TODO: Collect model attributes here...

            }

            this.model.set(obj, { silent: true })
        }
    })

    Views.${2:ViewName}s = Marionette.CompositeView.extend({
 
        tagName: 'div',

        className: '',

        template: '#forms-${1/./\L$&/g}-${2/./\L$&/g}s-template',

        itemView: Views.${2:ViewName},

        editView: Views.${2:ViewName}Edit,

        itemViewContainer: 'tbody'
    })

    AppManager.Utils.SmartTable.mixin(Views.${2:ViewName}s)
})

template.gsp

<script id="forms-${2:app}-${3:view}-template" type="text/template">
    <g:render template="${1:form}/${2:app}/${3:view}"/>
</script>

view.js

AppManager.module('${1:AppName}App.Views', function (Views, AppManager, Backbone, Marionette, \$, _) {

    'use strict'

    Views.${2:ViewName} = Marionette.ItemView.extend({
 
        tagName: '${3:div}',

        template: '#forms-${1/./\L$&/g}-${2/./\L$&/g}-template',

        onSaveRequest: function () {
            this.triggerMethod('save')
        }
    })
})