RequireJS modules are in Backbone view as TypeError:.. is not a function

51 views
Skip to first unread message

Jan Váca

unread,
Oct 11, 2017, 10:41:53 AM10/11/17
to backbonejs

I have been pretty much beginner at this part of javascript and I would appreciate any ideas how could be solved this problem. I use requirejs to define my own modules where I also use backbone.js. Let say I have main module where I initialize my Backbone view which is render without any problem. Also the click event where is calling method createSchemeForm create the form correctly. The problem raise up in situation when I call cancel method by click and the modules which are defined for Backbone view (e.g. "unicorn/sla/dom/helper"...) are undefined but when I called method createSchemeForm at the beginnig the modules were executed without any problem.

Thank you in advance for any suggestions.



Backbone view


define("unicorn/sla/view/scheme", [
   
"unicorn/sla/dom/helper",
   
"unicorn/soy/utils",
   
"unicorn/sla/utils"
], function (DOMHelper, soyUtils, jsUtils) {

   
return Backbone.View.extend({
        el
: 'body',
        inputData
: {},
        btnSaveScheme
: 'btn-save-sla-scheme',
        btnCancel
: 'btn-cancel-sla-scheme',
        btnCreate
: 'btn-create-sla-scheme',
        btnContainer
: '#sla-scheme-buttons-container',
        schemeContent
: '#sla-scheme-content-section',
        btnSpinner
: '.button-spinner',

        events
: {
           
'click #btn-create-sla-scheme' : "createSchemeForm",
           
'click #btn-cancel-sla-scheme' : "cancel"
       
},

        initialize
: function(){
            console
.log("The scheme view is initialized...");
           
this.render();
       
},

        createSchemeForm
: function () {

           
this.spin();
           
DOMHelper.clearSchemeContent();
           
DOMHelper.clearButtonsContainer();
           
//Get button
            $btnSave
= soyUtils.getButton({isPrimary: 'true', id: this.btnSaveScheme, label: 'Save'});
            $btnCancel
= soyUtils.getButton({isPrimary: 'false', id: this.btnCancel, label: 'Cancel'});
           
//Append new created buttons
           
DOMHelper.addContent(this.btnContainer, AJS.format("{0}{1}", $btnSave, $btnCancel));

           
//Call service to get entry data for scheme creation form
            AJS
.$.ajax({
                url
: AJS.format('{0}={1}',AJS.I18n.getText('rest-url-project-scheme-input-data'), jsUtils.getProjectKey()) ,
                type
: "post",
                async
: false,
                context
: this,
               
global: false,
           
}).done(function (data) {
               
this.inputData = data;
                $slaSchemeForm
= soyUtils.getSchemeCreateForm({slaScheme : data, helpText: AJS.I18n.getText("sla-time-target-tooltip-text")});
               
DOMHelper.addContent(this.schemeContent, $slaSchemeForm);
                jsUtils
.scroll(this.schemeContent, 'slow');
           
}).fail(function () {
                jsUtils
.callFlag('error', AJS.I18n.getText("message-title-error"), AJS.I18n.getText("sla-error-load-scheme-input-data"));
           
}).always(function () {
               
this.stopSpin();
           
});
       
},

        spin
: function () {
            AJS
.$('.button-spinner').spin();
       
},

        stopSpin
: function () {
            AJS
.$('.button-spinner').spinStop();
       
},

        cancel
: function () {
            jsUtils
.clearButtonsContainer();
            jsUtils
.clearSchemeContent();
            $btnCreateScheme
= soyUtils.getButton({isPrimary: 'false', id: this.btnCreate, label: 'Create SLA Scheme'});
           
DOMHelper.addContent(this.btnContainer, $btnCreateScheme);
           
DOMHelper.addContent(this.schemeContent, soyUtils.getSchemesTable(new Array())); // TODO - get current data from server instead of empty array
       
}

   
});
});
Sem vložte kód...


Main module where is Backbone view initialize

define("unicorn/sla/project/batch", [
   
"unicorn/sla/utils",
   
"unicorn/sla/data/operations",
   
"unicorn/sla/data/validator",
   
"unicorn/sla/dom/helper",
   
"unicorn/sla/model/confirm/message",
   
"unicorn/sla/view/scheme",
   
"exports"
], function (jsUtils, operations, validator, DOMHelper, ConfirmMessage, SchemeView, exports) {
   
//Load project batch
    exports
.onReady = function () {
        $schemeView
= new SchemeView();
   
}
});


AJS
.$(function () {
    AJS
.$(document).ready(function () {
       
require("unicorn/sla/project/batch").onReady();
   
});
});
Sem vložte kód...


Reply all
Reply to author
Forward
0 new messages