CODEWITHSUNDEEP
javascriptbackbone.jsjavascript-objects
pravin
pravin

Reputation: 161

how to create object of model when using in backbone js in javascript

My problem is that i want to create object of model in javascript .I use backbone.js I want to share model object globally because I need that object in many js files 

 (function(){
     this.mymodel=Backbone.Model.extend({
            ----
            ----
     });
  return{
            var colobj = new mymodel;
  }
})

and I am sharing "colobj" object in another js file as follows

(function(){
     var collectionobj = new colobj;
 });

but this gives me error what is wrong in this example

Upvotes: 0

Views: 2818

Answers (2)

theotheo
theotheo

Reputation: 2702

It seems to me, you don't understand what is a closure, and how to use IIFE.

You have a few options to do what you want.

At first, you could just use the global object to share objects across files. Like this:

// model.js
(function(exports, Backbone, undefined) {
    var Model = Backbone.Model.extend({});

    exports.Model = Model;
})(window, Backbone);

// collection.js
(function(exports, Backbone, _, undefined) {
    var Model = exports.Model;
    var Collection = Backbone.Collection.extend({
        model: Model
        // ...
    });

    exports.Collection = Collection;
})(window, Backbone, _);

Or this:

// model.js
Model = (function(Backbone, undefined) {
    var Model = Backbone.Model.extend({});

    return Model;
})(Backbone);

// collection.js
Collection = (function(Backbone, _, undefined) {
    var Collection = Backbone.Collection.extend({
        model: Model
        // ...
    });

    return Collection;
})(Backbone, _);

Or you could create an object in a global space and use it as a namespace.

// model.js
(function(App, Backbone, undefined) {
    var Model = Backbone.Model.extend({});

    App.Model = Model;
})(App = (window.App || {}), Backbone);

// collection.js
(function(App, Backbone, _, undefined) {
    var Model = App.Model;
    var Collection = Backbone.Collection.extend({
        model: Model
        // ...
    });

    App.Collection = Collection;
})(App = (window.App || {}), Backbone, _);

Or you could define your objects as AMD-modules and then use any AMD loader. For example, if you would like to use require.js you could write something like this:

// main.js
require.config({
    paths: {
        'jquery': '/js/vendor/jquery.js',
        'underscore': '/js/vendor/underscore.js',
        'backbone': '/js/vendor/backbone.js',
        'model': '/js/model.js',
        'collection': '/js/collection.js'
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },

        underscore: {
            exports: "_"
        }
    }
});

// model.js
define([
    'jquery', 
    'underscore',
    'backbone'
], function($, _, Backbone){
    var Model = Backbone.Model.extend({});
    return Model;
});

// collection.js
define([
    'jquery', 
    'underscore',
    'backbone',
    'model'
], function($, _, Backbone, Model){
    var Collection = Backbone.Collection.extend({
        model: Model
    });
    return Collection;
});

Upvotes: 3

gion_13
gion_13

Reputation: 41533

First of all, you should change this line : 

var colobj = new mymodel;

to 

var colobj = new this.mymodel;

The thing is that mymodel was undefined and that may have been the roots of your problem.

In addition, your first colobj is an instance of your model, thus it is an object and not a constructor. That's why the second time you try to instantiate it : 

var collectionobj = new colobj;

it throws an error, because the browser thinks you're doing something like : 

var collectionobj = new (new mymodel);

I suggest you pass only the model definition the from one closure to another: 

//...
return{
        var colobj = this.mymodel;
}
//...

UPDATE
I'm very surprised to see that I've missed this before.
You are returning an invalid object : 

{var colobj = new mymodel;}

I think that you probably meant to return an object that hash a colobj property with the value of your model. If that's the case, all you have to do is return this object : 

{colobj : this.mymodel};

Upvotes: 1

Related Questions