Knockout.js observableArray vs Backbone.js Collection - What's the Difference?

Question

In Knockout.js, I create an observable array to push models onto:

function Room(data) { this.name = ko.observable(data.name); } function RoomViewModel() { var self = this; self.rooms = ko.observableArray([]); self.newRoomText = ko.observable(); self.addRoom = function() { self.rooms.push(new Room({ name: this.newRoomText() })); self.newRoomText(""); $("#modal").dialog("close"); }.bind(self); } 

In Backbone.js, I would create a collection to store my models:

 var Book = Backbone.Model.extend(); var Books = new Backbone.Collection([ {name: "Abe Lincoln - Vampire Hunter"} {name: "Pride and Prejudice and Zombies"} ]); 

How different are these 2 structures from each other?

What exactly is going on behind the scenes to make these data structures different from the standard Javascript array?

Answer 1

This is a difficult question to fully answer, but here is my question :).

Backbone.js Collection :

• selection of models from the server
• trigger changes / add / remove events
• listening to model events and launching them in collections
• automatic model checking
• many methods of working with multiple browsers to work with collections (each, maximum, sorting, reduction, etc.).

Knockout.js observableArray :

• elements added and removed - the user interface is automatically updated.
• cross-browser implementation of array methods (e.g. IE8 has problems with the original .indexOf() )
• convience destroy and destroyAll for a Rails developer who sets the _destroy property on objects to true - this tells Rail RailRecord which objects to delete.

Backbone.Collection works with the Backbone.js base and observableArray only with Knockout.js. There is no real comparison of them with each other in isolation, because they are part of the structure, and if your application is built on Backbone, you cannot use observableArray and vice versa.

If you want to know what exactly happens behind the scenes, here is the source code:

• Backbone.Collection
• obervableArray