0

I'm learning Backbone with RequireJS and I have got a problem when trying to instantiate additional model in my view. I have couple of events which are calling different methods. Different methods are using more or less different models and subviews The example above drops on new model instance

TypeError: GridsModel is not a constructor
    var gridModel = new GridsModel;

when fireing grid method

My code looks like

/*global define*/

define([
    'jquery',
    'underscore',
    'backbone',
    'templates',
    'jqueryui',
    'models/grids',
    'views/grids',
    'views/modal'
], function ($, _, Backbone, JST, GridsModel, GridsView, ModalView) {
    'use strict';

    var EditorView = Backbone.View.extend({
        template: JST['app/scripts/templates/editor.ejs'],

        tagName: 'div',

        el: '.container',

        id: '',

        className: '',

        events: {
            "click button.expand" : "controlToggle",
            "click .row-edit" : "edit",
            "click .grid" : "grid",
            "click .delete" : "delete",
            "click .components" : "components",
        },

        initialize: function () {
            var gridModel = new GridsModel;
            var body = $('body')
            var rows = body.find('.row')

            console.log(this.model)
            $.each(rows, function(e , v){
                if(v.length > 0)
                    console.log(v)
                    //$(this).parent().addClass('editor-row')
                else
                    //console.log($(this))
                    $(this).addClass('editor-row empty-row')

            })

        $('.ui-sortable').sortable({ handle: 'button.row-handle' })
            this.listenTo(this.model, 'change', this.render);

        this.listenTo(this.model, 'change', this.render);

        },

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));

        },

        controlToggle: function(e){
            var controlls =  $(e.currentTarget).closest('.editor-controls')
            $(controlls).find('.active').removeClass('active')
            $(e.currentTarget).parent().addClass('active')
        },

        edit: function(){

        },

        delete: function() {

            confirm('Press OK to delete section, Cancel to leave')

        },

        grid: function() {

            this.model = new GridsModel({
                 'title': 'Edit Grids'
            })

            var gridView = new GridsView({
                model: this.model 
            })

            var grids = new ModalView({
               model : this.model,
               subview: gridView
        }).render()


        },

        components: function() {
            this.model = new Fefe.Models.Components({
                'title': 'Add Component'
            })

            var componentsView = new Fefe.Views.Components({
                model: this.model 
            })

            var components= new Fefe.Views.Modal({
                model : this.model,
                className: 'modal large',
                subview: componentsView
            }).render()
        }

    });

    return EditorView;
});

What do I do wrong here

fefe
  • 8,755
  • 27
  • 104
  • 180

0 Answers0