Backbone.js and non-model objects - javascript

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.

Related

accessing a backbone application i did not create

I'm trying to create a plugin to be used with a backbone application (https://smartpodcastplayer.com/). I unfortunately don't have any experience with backbone, so i have been hitting my head against the wall all afternoon:-)
My question:
Given the Backbone object, how can i get the list of all the model instance that have been created? My end goal is to listen for certain event that those object send.
i.e.: this app creates track objects, how can i get the list of all tracks starting at the backbone object.
Any alternate solution is also welcome...
Thanks!
Backbone object is the object provided by Backbone.js for us to create views and collections .etc. Usually, we don't assign any data to Backbone Object(depend's on implementation but mostly no).I think it's not possible to get data from models and collections given the Backbone object.
The ideal way of implementing is using events.You can listen to all the events triggered by backbone models,collections, and views and maintain the state in your plugin.This is possible only if the app triggers all the events.I can't think any other way.

mcv application where to adapt model data for the view?

I'm implementing a fairly simple application in javascript using the MVC approach. My views are using mustache as templating system.
When the application loads an api gets queried and it returns a complex object which I store in the model. When it's time to visualise the data on the view I'd need to transform this complex object in a much simpler version with less properties and nesting, in order for the template engine to be able to display the view.
I'm wondering if it's controller responsability to "adapt" the data for the view or this process should be delegated to some other part of the application.
I use Automapper to do convert entity framework models to simpler Viewmodels/DTO objects. It works by convention and when the convention doesn't work, you use a fluent API to tell it how to convert the properties.
Very simple to use and you only need to define your mapping logic once, which is exactly what you want.
Maybe you should create DTO object and map that object to you ViewModel

Where to format collections / objects

From front end architectural point of view, what is the most common way to store scripts that perform transformations on collections of objects/models? In what folder would you store it, and what would you name the file / function?
Currently I have models, views, controllers, repositories, presenters, components and services. Where would you expect it?
As a component (what would you name it?)? As a service? Currently I use services to make the connection between the presenter and the repository to handle data interactions with the server.
Should I call it a formatter? A transformer? If there is a common way to do, I'd like to know about it.
[...] models, views, controllers, repositories, presenters, components and services. Where would you expect it?
services, mos def. This is a interception service for parsing data.
Should I call it a formatter? A transformer?
Well, trasformer (or data transformer) is actually quite good IMO. data interceptor also comes to mind, and data parser, obviously.
If there is a common way to do, I'd like to know about it.
Yes, there is! Override the model's / collection's parse() function to transform the data fetched from the server into your preferred data structure.
Note that you should pass {parse: true} in the options to make it work.
This, of course, does not contradict using the services you wrote from within that function. You can encapsulate the parsing logic in those scripts, and reuse it anywhere you'd like.
Bare in mind that there will probably be very little code reuse when using parse(), as each transformation will relate to a single model or collection.

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

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.

Categories