Home/ Questions/Q 8198233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T05:54:30+00:00

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html> <head> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script> <script src=http://documentcloud.github.com/underscore/underscore-min.js></script>

  • 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
    src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
</head>
<body>

    <button id="cmd_create_event" name="cmd_create_event" type="button">Create
        a new `Event`</button>

    <script type="text/javascript">
        var EventModel = Backbone.Model.extend({
            initialize : function() {
                console.log("`Event` is initialized. id: " + this.cid);

                this.bind("change:status", function() {
                    console.log(this.get("status") + " is now the value for `status`");
                });

                this.bind("error", function(model, error) {
                    console.error(error);
                });
            },
            defaults : {
                "status" : 0
            },
            validate : function(attrs) {
                if (attrs.status <= 0)
                    return "invalid status";
            }
        });

        var EventList = Backbone.Collection.extend({
            initialize : function() {
                console.log("`EventList` is initialized");
            },
            model : EventModel,
            add : function(event) {
                console.log("`Event` added to `EventList`.");
            }
        });

        var EventView = Backbone.View.extend({});

        $(document).ready(function() {
            var event_list = new EventList();

            $("#cmd_create_event").click(function() {

                // GENERATION METHOD #1:
                /*var event = new EventModel();
                event.set({
                    status : 1
                });
                event_list.add(event);*/

                // GENERATION METHOD #2:
                event_list.add({
                    status : 1
                });

            });
        });
    </script>

</body>
</html>

In the above code there are two methods I’m using to add an EventModel to an EventList.

Method #1 does fire EventModel.initialize(), while Method #2 does not.

The docs says it’s possible to add an object just like Method #2, so, why don’t I get the object constructed as if I would new EventModel()? Quoting the docs:

If a model property is defined, you may also pass raw attributes
objects, and have them be vivified as instances of the model.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With the first method, you actually call the constructor of the model 

    var event = new EventModel();

    With the second method, you just pass { status: 1 } to the EventList.add method you defined earlier, which only logs to console and doesn’t do anything.

    If you call

    Backbone.Collection.prototype.add.call(this, event);

    In your EventList.add method, Backbone creates an new model instance from the passed data and initialize() will be called (because you specified a model attribute when defining EventList).

    • 0