How To Create Collection Through Global Variable In Backbone.js?

I am sent the assistance by many advisors in stackoverflow, In part of my problem is solved but a few problems are remained. I consult the answer and I has try to solve the proble

Solution 1:

What's the purpose of the namespacing pattern?

You are misusing the namespace pattern. The goal in this case is to namespace all your custom Backbone classes constructor into the app object.

In order to keep everything clearly separated, put all your collections constructor into the app.Collection object, models constructor within app.Model, etc.

If you inspect the app namespace after all the classes are created, it should look like the following:

var app = {
    Collection: {
        VideoList: /* video list constructor */
    },
    Model: {
        Video: /* video model constructor */
    },
    View: {
        /* same thing goes for views */
    }
};

The app namespace shouldn't contain instances, mainly constructors.

Do not overwrite the constructors references:

app.Model = new models.Video();

Create an instance when you need one only, and keep it in the scope it's needed.

this.model = new app.Model.Video();this.collection = app.Collection.VideoList();

Instances and constructors

To really understand the previous point, you need to understand the differences between a constructor and an instance. The concept is applicable to other OOP languages, but I'll keep the description within the JavaScript language specifics.

A constructor is just a function. From the MDN doc on Object.prototype.constructor:

All objects will have a constructor property.

[...]

The following example creates a prototype, Tree, and an object of that type, theTree.

functionTree(name) {
  this.name = name;
}

var theTree = newTree('Redwood');

As seen in the previous example, to create an instance, use the new operator. What is the 'new' keyword in JavaScript?

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

new constructor[([arguments])]

Creating custom constructors lets you define custom types (classes). There are multiple ways to create more complex custom types in JavaScript but that's another discussion. For more details, see How to “properly” create a custom object in JavaScript?

Fortunately, Backbone provides an easy (opinionated) way to define new types, the extend function, which is available on all the Backbone's base types.

var ModelConstructor = Backbone.Model.extend({ /*...*/ });

var modelInstance = new ModelConstructor();

Note that myVariable = MyConstructor will just pass a reference of the constructor to myVariable, it won't create a new instance. You could still use the variable as the constructor though.

var myInstance = new myVariable();

Ordering and dependencies

If you look at your code, you'll notice that the app.Collection.VideoList class uses the app.Model.Video as the value for the model property.

This means that app.Collection.VideoList depends on the availability of the app.Model.Video class. So the collection file should be inserted into the document after the model file.

Like in the other answer of mine you linked:

<scriptsrc="js/models/todo.js"></script><!-- no dependencies --><scriptsrc="js/collections/todos.js"></script><!-- depends on the model --><scriptsrc="js/views/todo-view.js"></script><!-- depends on the collection and the model --><scriptsrc="js/views/app-view.js"></script><!-- depends on the todo-view --><scriptsrc="js/routers/router.js"></script><!-- depends on the app view --><scriptsrc="js/app.js"></script><!-- depends on the router -->

---