Question

I am using ‘require.js’ in my app, i am getting this error :

ReferenceError: Can't find variable: appModel
require.js:32Error: Load timeout for modules: listView

i unable to understand what is wrong with my side:

my config is :

requirejs.config({
    baseUrl:"scripts",
    paths:{
        //libraries
        jquery          :"lib/jquery-1.9.0.min",
        jqueryUI        :"lib/jquery-ui-1.9.2.custom.min",
        underScore      :"lib/lodash-1.0.0.min",
        backBone        :"lib/backbone-min",
        //scripts
        appInit         :"js/tasklist",
        loginValidate   :"js/loginValidate",
        listModel       :"js/models/listModel",
        listCollection  :"js/collections/listCollection",
        listView        :"js/views/listView"
    },
    shim:{
        "underScore":{
            exports: "_"
        },
        "backBone":{
            exports:"Backbone",
            deps:["underScore"]
        },
        "appInit" : {
            deps:["jquery","jqueryUI","underScore","backBone"]
        },
        "jqueryUI":{
            deps:["jquery"]
        },
        "loginValidate":{
            deps:['jquery']
        },
        "listModel":{
            exports:"listModel",
            deps:["backBone"]
        },
        "listCollection":{
            exports:"listCollection",
            deps:["listModel"]
        },
        "listView":{
            exports:"listView",
            deps:["listModel","listCollection"]
        }
    }
});

require(['jquery'],function(){
    if($('#tlLoginForm').length){
        require(["jquery","loginValidate"],function($){
            $(function(){
                var paramsLoginForm = {
                        loginForm : $('#tlLoginForm')
                    };
                var validate = tasklistHandler(paramsLoginForm);
                validate.init(); //it works fine.
            });
        });
    }
    if($("#boardTemplate").length){ // i am finding my template and initiating the values
        require(["backBone","listModel","listCollection","listView"], function(){

        });
    };
});

my model in the listModel.js

require(['jquery','backBone'],function($,Backbone){ // i am importing jquery, and backbone and assigning the model
var appModel = Backbone.Model.extend({
        url : 'data/data.json',
        defaults:{
          "id"                  :"id",
          "title"               :"Title",
          "projectName"         :"project",
          "dueDays"             :0,
          "dueTime"             :0,
          "dueDate"             :"0-0-0000",
          "totalTasks"          :0,
          "taskCompleted"       :0,
          "percent"             :65,
          "taskStatus"          :"Assigned",
          "jobtype"             :"vip",
          "username"            :"[e-mail]",
          "notes"               :"notes1"
        }  
      });

      return appModel; // tried not works
});

my collection in listCollection.js

define(["jquery","backBone","listModel"],function($,Backbone,model){ 

// i am importing jquery, backbone, and model i declared in listModel.js, but it’s not
work!
console.log(‘collection’,model); // i am getting undefined for model
var collection = Backbone.Collection.extend({
model:model,
initialize:function(){
console.log(this.model);
}
});

    var newModel = new appModel; //ReferenceError: Can't find variable: appModel
    console.log(newModel); // throw the error as like i mentioned.
});

any one can help me to correct my issue please?

Answer 1

This is works for me..

Instead of using "require" i used "define". it all sets fine now.

thanks all.