After integrating requirejs in backbone app, (view) not working

Question

I am developing my backbone application using require.js. all were fine. up to I integrate the routers. after I integrate my router I'm getting errors saying:

TypeError: appView is undefined
[Break On This Error]   

that.$el.append(new appView.getView({model:data}).render());

and in the view.js I'm unable to route using this line(i intentionally commented)

listTrigger:function(){
            myApp.navigate("/student");
        }

and i post my all codes here... anyone can suggest or correct my code. or give me the reasons what i am doing wrong here?

main.js

require.config({
    baseUrl: 'js/',
    paths:{
        'jquery'        :"lib/jquery.min",
        'underscore'    :"lib/underscore-min",
        'backbone'      :"lib/backbone-min",

        'appModel'      :"app/model/model",
        'appView'       :"app/views/view",
        'appViews'      :"app/views/views",
        'appRoute'      :"app/router/router"
    },
    shim:{
        underscore:{
            exports:"_"
        },
        backbone:{
            exports:"Backbone",
            deps:["jquery","underscore"]
        }
    }
});

require(["appRoute"], function(appRoute) {
    var myApp = new appRoute.getRoute();
    Backbone.history.start();
});

model.js

define("appModel", ['backbone'], function(Backbone){

    "use strict"

    var appModel = Backbone.Model.extend({});

    var appCollection = Backbone.Collection.extend({
            model:appModel,
            initialize:function(){
                // console.log("initialized from collection");
            }
    });

    return {
        model: appModel,
        collect:appCollection
    }

});

view.js

define("appView", ["backbone","appViews"], function(Backbone,appViews){

    "use strict"

    var appView = Backbone.View.extend({
        tagName:"li",
        template:_.template($("#listTemp").html()),
        events:{
            "click" : "listTrigger"
        },
        initialize:function(){
            this.render();
        },
        render:function(){
            return this.$el.html(this.template(this.model.toJSON()));
        },
        listTrigger:function(){
            // myApp.navigate("/student");
        }
    });

    return{
        getView: appView
    }

})

views.js with some json data:

define('appViews', ["backbone","appModel","appView"], function(Backbone,appModel,appView){

    "use strict";

    var students = [
                    {"name":"student1"},{"name":"student2"},
                    {"name":"student3"},{"name":"student4"},
                    {"name":"student5"},{"name":"student6"},
                    {"name":"student6"},{"name":"student8"},
                    {"name":"student9"},{"name":"student0"}]

    var appViews = Backbone.View.extend({
        el:$("#app").find('ul'),
        initialize:function(){
            this.collection = new appModel.collect(students);
            this.collection.on('reset', this.renderAll);
            this.renderAll();
        },
        render:function(){
            console.log("render called from views");
        },
        renderOne:function(){
            console.log("render one")
        },
        renderAll:function(){
            var that = this;
            this.collection.each(function(data,i){
                that.$el.append(new appView.getView({model:data}).render());
            })
        }
    });


    return {
        appViews : appViews
    }


})

router.js

define('appRoute', ["backbone","appModel","appView","appViews"], function(Backbone,appModel,appView,appViews){

    var appRouter = Backbone.Router.extend({
        routes:{
            "":"initiate"
        },
        initialize:function(){
            // console.log("called from routersssss");
        },
        initiate:function(){
            new appViews.appViews();
        }
    })


    return {
        getRoute : appRouter
    }

})

across this all are working correct up to using routers. after I'm not getting the result. Am I using routers incorrectly?

It is strange to see that your are calling constructor without parentheses, shouldn't that be new appView().getView(...)? Also, if appView is undefined, there might be runtime error in the appView or module failed to load for some reason. — Tomas Kirda, May 14 '13 at 04:14

score 1 · Accepted Answer · edited May 23 '17 at 10:32

@TomasKirda: you can new-up without the trailing parentheses, but I wouldn't recommend it! Also, see here.

Having said that, you have identified the problem in this instance!

This code:

new appView.getView(...);

Is trying to create a new appView.getView which isn't a reference to a constructor (it would be if the appView constructor had a property getView).

So in this case, you are quite right that the parentheses are required:

new appView().getView(...);

After integrating requirejs in backbone app, (view) not working

1 Answers1