Back-Mario short review #1

UPD: Below notes are valid for Backbone with versions 1.3.0 – 1.3.3 and Marionette 1.8.8 – 2.0.*. Aug-23-2016 Marionette release 3.0.0 major version with many changes, including API and function name changes.

I decided to list a few tricky items here, which are not visible at a first glance when u start working with Backbone.JS and Marionette.JS to build your SPA.

Backbone.JS key points

View

• if you have events:{} for your view it’s automatically in scope current view context.
• The el property references the DOM object created in the browser. Every view has an el property, and if it not defined, Backbone.js will construct its own, which is an empty div element.
• el vs. attributes vs. tagName vs. className
  • If we use attributes (or className) as function(){ return { } } IT GIVES us ability to see this.model.get() method. Otherwise just simple attributes : {} (or className:”” with concatenate this.model.get(“smth”)) doesn’t not have this scope vision.
  • view.className:”span1″ value will override view.attributes: {class=”my-class”}
• IF WE HAVE render() override then template() function IS NOT TAKING INTO ACCOUNT.

Model, Collection

• U can set fetch(parse: true) and as result can override parse() function and return NEW parse result.
• Model, Collection have all Underscore methods inside: invert(), extend(), pick(), etc…
• When you have View connected with Collection and collection.fetch() return null data, view WILL not be re-rendered, but new elements will be appended. Kinda fetch() does not do reset() when zero data from server (aka no changes).
• UPD: .toJSON()returns raw Object of model or models Array of collection.
• UPD: .clone()

Marionette.JS key points

General

v1.8.x and latest version (2.1.x) are different at least in functions names. Documentation changed appropriately since v 2.0.0-pre1.

View

• this.ui: { object of UI elements recently used}
  • UPD: these elements are already JQueirzed, so they are real JQeuy elements.
• There is short way to get JSON of model using  serializeData()

ItemView

• Represents a single item: Backbone.Model or Backbone.Collection, and will be treated as a single item.
• By default requires template field value. We can use template: _.template(“”) which will DO NOTHING. And we can render our View only from JavaScript (tagName, className).
• Item views will serialize a model or collection, by default, by calling .toJSON.
  • If the serialization is a model, the results are passed in directly.
  • If the serialization is a collection, the results are passed in as an items array variable, which can be used by _.each().
• options passed to View constructor via instance, is global and by default access via this.options inside of view.

CollectionView

• The CollectionView will loop through all of the models in the specified collection, render each of them using a specified itemView, then append the results of the item view’s el to the collection view’s el.
• By default the collection view will append the HTML of each ItemView into the element buffer, and then call jQuery’s .append once at the end to move the HTML into the collection view’s el.
• Defining an itemView in your collection view definition. This must be a Backbone view object definition, not an instance.
• `itemViewOptions` just do extend base options.
• itemEvents or in new version of Marionette childEvents is very useful.

CompositeView

• CompositeView can take two parameters:
  1) model for it own use
  2) collection for itemsView
• template option is required.
• UPD: itemViewContainer

Region

• “ItemView” need to be rendered by render(). But when you use Marionette.Region it’s done by show() method.
• If you replace the current view with a new view by calling show, by default it will automatically close the previous view.
• Ways how to attach an existing view to a region, without rendering or showing the view, and without replacing the HTML content of the region:
  • set the currentView in the region’s constructor,
  • call attachView on the region instance.

Layout

• We can setup layout and code it dynamically( layout.addRegion(“foo”, “#foo”) and so  on).

PS. Might be helpful:

• Notes from first project using Backbone Marionette
• Don’t wrap views if using templates #546
• Backbone patterns
• Lostechies – web site by Marionette.JS author, with lot of good detailed and documented examples.
• Backbone.js with Jeremy Ashkenas (audio : 2013)