We Keep Coding

Backbone.js and non-model objects

I am currently using Backbone.js as a front-end MVC system. Assume, however, that I have objects which are not necessarily models (for example, an object which parses JSON from a successful AJAX request).
How should I best represent these objects? I don't think they're "models" in the traditional sense. Should they just be normal JavaScript objects? It seems like Backbone should have some way to account for this.
Open to any feedback.

Objects doesn't have to be models just because you are using Backbone.
The Backbone Model object is basically just a wrapper around a regular object, that has methods for accessing the data, and events that you can use to subscribe to changes.
If you want to put the objects in a Backbone Collection, then they will be wrapped in models if they aren't already.

Thank you that you did not ask about controllers that do not exist in Backbone actually.
To my mind, there is no need to implement parsers (or any other services) as models in Backbone, because in this case you pull with a parser a lot of orphan code that you are never going to use.

How do I use & access a Backbone.js Collection as property/attribute in a Model?

I'm new to Backbone (still stuck in Ruby on Rails mode) and am a bit confused about how to add a Collection to a Model as a property/attribute (is "attribute" the correct term?).
For example, I have a Model named current_plan, and a variable named json_dump that was returned from the server that includes an array of participants. I want it to have an attribute named participants (which is a Collection of participants), fill it from the json_dump.participants variable, and be able to use code like `current_plan.participants.where({first_name: "Dan"}).
Here are some snippets of my initialize function:
var current_plan = new Plan();
current_plan.set({attribute: val} ...other attributes... );
current_plan.participants = new Backbone.Collection(json_dump.participants);
But that forces me to access regular attributes like: current_plan.attributes.attribute. Also, I can see that there is correct data in the current_plan.attributes.participants.models, but I can't figure out how to use any of the Collection methods on current_plan.
Clearly I don't understand what's going on, and why there are so many extra layers involved. The Backbone docs seem a little sparse, and I haven't been able to find anything on SO or Google searches that match what I want to do. If there's another question or tutorial out there that explains this, I'd greatly appreciate someone pointing me that way. I also saw the Backbone Relational project which seems like it may be what I need, but I'd prefer not to add more complication to Backbone until I understand the basics.
Thanks for any help you can provide to help a new Backbone user out!

the backbone framework doesn't have a official way to handle relationships between models and collections i think, and i don't use backbone relational, but i have multiple relationships in my backbone collections/models.
when i am defining a relationship model with a collection i use it as a property of the model object, not a backbone atribute, so:
var current_plan = new Backbone.Model(); //or backbone model extended
current_plan.participants = new Backbone.Collection(json_dump.participants);
then as #andrew-hubbs says you should always use the backbone api to deal with models and collections attributes to have consistency in your code along with backbone versions for example.
then you can access/set the model properties like this
current_plan.get('property');
participant = current_plan.participants.get(1);
participant.get('property');
participant.set('name', 'bob');

var currentPlan = new Plan(); // Assuming Plan is a Backbone.Model
currentPlan.set("participants", new Backbone.Collection(json_dump.participants));
currentPlan.get("participants") instanceof Backbone.Collection
currentPlan.get("participants").at(0) instanceof Backbone.Model
You should always access the attributes hash on Backbone models through the get/set methods. If this is not working then your json_dump.participants is probably not formated correctly. You can see an example from the documentation of this kind of collection instantiation here.
Yes Backbone.Relational is a project to handle basically exactly this. It allows you to define relationships between models. It then makes it very easy to automatically create the collections as attributes on instances of the models.

Simple explanation of how BackboneJS works?

I have read and even run a sample application that is fully implemented on backboneJS and Django. But am kinda lost how backboneJS is handling this stuff. I need a simple dummy explanation on how backboneJS is receiving the JSON data, building the model, building the collections and listing the data in its view.
Data is displayed in html div tag called "#person"
This is the RESTful/JSON data coming from my server
{"objects":[{"id":"1","name":"John","age":"20", "gender":"male"},{"id":"2","name":"Mary","age":"30","gender":"Female"}]}
Things am looking for in the explanation are;
What is the first function/object created/called by BackboneJS ( entry point )
How does backboneJS tell the views to display the data received?
How does backboneJS model map to the individual fields in the JSON data (id, name, age)
How can i peep in the collections/models created by backboneJS using browser javascript console?
If i have a data entry form with the same fields as the JSON data, using backboneJS, how will i be able to POST the data back to the server, which objects/functions will backboneJS use to perform this task?
Any extra information will be highly appreciated.
Gath

1. What is the first function/object created/called by BackboneJS ( entry point )?
Backbone.js follows MVC architecture. Model defines the actual structural design of model. View defines how the application visually displayed. This view will create the instance of Model and it will be used in the application.
So, in backbone application, Instance of view is created first. When we create an instance of View by calling new myView();, initialize() function will be called first. Model can be instantiated from View as per the requirements.
2. What is the first function/object created/called by BackboneJS ( entry point )?
 When you create the instance of model, you can provide the data through that instance. There are getters and setters available for Model.
For example, User is the Model for above JSON. Model is instantiated as below.
var user=new User({“id”:”1”,””name”:”john”,”age”:20,”gender”:”male”});
You need to access the JSON object to define the model.
3.How does backboneJS model map to the individual fields in the JSON data (id, name, age)?
As said before, individual fields can be mapped while instantiating or with the getter and setters of backbone.js
4.How can i peep in the collections/models created by backboneJS using browser javascript console?
You can console the java script objects with toJSON() function. Usually, underscore.js provides more utility functions in backbone.js.
You need to browse through backbone.js documentations.

Addy Osmani did a fine job of explaining that and going even bit more into details down here -> https://github.com/addyosmani/backbone-fundamentals

Apply Backbone.js for multi-module Javascript Website

I am writing a module based javascript website, backed by a Mysql DB.
Each module talks with the DB through PHP.
On the UI, for simplicity, the module on the left will display all relevant rows, with edit(write) functionality. The module on the right display the data from the same DB, with write access too.
So each would affect the other in each update.
I'm told backbone would be a good framework. Then, I have read the todos example, and understand how there are item->itemList, view->viewList, etc...
But now, the question is, how do I apply it to this situation?
Which is an item, a view in this situation?

The module on the left and the module on the right are Views, each of which can be made up of other views.
Within the model don't store a reference to the view (as I've seen done in some of the examples):
this.view = view; //view being passed in as an arg
The reverse (a view storing a reference to a model) is okay. Your views should be doing most of the work, listening to and responding to model events. Thus, in the view initialize method you might:
model.bind("interesting-event", function(){
//the view updates/reacts to the model.
});
Also, never add a model to two collections (just one ever). When a model is assigned to a collection, Backbone sets a reference on the model that points to the owning collection.
Incidentally, the a-model-cannot-belong-to-two-collections issue is the reason why you don't want a model referencing its view. A model can have many views on one screen.
Backbone is perfect for your needs. Start with a very basic version of your app and keep fleshing it out. All the while keep reading about Backbone online. I read everything I could find (there's not a whole lot, not really). The key concept is simply event based programming (much like you'd use in VB or lots of other platforms). It's a lot of trial and error, but you'll make sense of it with practice.

Does it make sense to initialize models from the DOM in backbone.js?

backbone.js relies on restful applications to initialize models, but what about progressive enhancement? The data is already in the dom (or some of it), so should my models still make calls the the restful interface even though the html elements exist? Is there another library design that might be better suited for this case?

Backbone can handle that pretty well. The way I handle this case is to have a factory model that can receive a DOM node and parse it in order to extract data (id, fields and so on).
If you supply a 'el' option to a View constructor, backbone won't fetch nor render the model, so you can keep your node as is.
Upon data change, the controller will then sync to the server. You must be careful though to include whatever data your application needs to function whether it's displayed or not.

You should not use DOM element to initialize your model with backend data. You have a really nice infrastructure with backbone to not do this. When you rely on the DOM you need to change your javascript whenever the DOM structure change due to design for exemple.
Also do not rely on backbone view to create the model. It must go the other way around, the model dictate the views on the page.
Just add a script element and create your JS objects directly in there. You can initialize collections, single models, etc.
You can do the same with templates or DOM UI building blocks:
<script type="text/js-template">
<!-- Your template as realy do elements or using a js templating engine like _.template-->
</script>
Load up your page and have your app play locally.