Questions tagged [marionette]

Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. Do NOT use this tag for Firefox's Marionette driver. Use the firefox-marionette tag instead.

Backbone.Marionette is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.

Important to note that Marionette introduced some breaking changes in their API when moving from 1.X to 2.X below is a quick summary of the main breaking changes that can cause errors in your app, a full report on the changes can be found on google docs.

General

  • All instances of the word type in the API have been replaced with the word class. For instance:
    • regionType => regionClass
    • ChildViewType => ChildViewClass

Applications and Modules

  • Application’s initialize triggerMethods have been renamed to start, which is more descriptive of what is actually happening. More specifically, initialize:before and initialize:after are now before:start and start, respectively. Note that no functionality has been lost with this change; it is merely a changing of names.

Controllers

  • close has been renamed to destroy to emphasize the fact that an instance should not be reused, or ‘opened,’ after it is destroyed

Regions

  • Regions now expose region.el and region.$el, just like View’s. Due to this change if you were depending on region.el to be a string selector you must update your code to use region.$el.selector.

  • The open method has been renamed to attachHtml

Views

  • Layout is now called LayoutView
  • Renamed close to destroy for views. Close was a confusing verb for users who thought that they could be reopened. The verb destroy makes it more clear that once a view is destroyed you can not reuse it.
  • Returning false from onBeforeClose no longer prevents the view from closing
  • appendHtml has been renamed to attachHtml.
  • appendBuffer has been renamed to attachBuffer
  • Removes duplicate and inconsistent itemView events. No functionality was lost with this change; simply use the unprefixed version instead. For instance, use before:render instead of item:before:render
  • childEvents callbacks no longer receives the event name as the first argument
  • itemView within a collectionView is now known as childView. This removes confusion for new users as to the fact that you can show any type of view in your collectionView.
  • All CollectionView methods that referenced itemView now use the same childView as well. For instance, getItemView is now getChildView. Do note that CompositeViews extend from CollectionView, so these API changes affect that Class as well.

References

2383 questions
78
votes
2 answers

What's the difference between a Marionette Layout and a Region?

Marionette provides two components named Regions and Layouts. At first glance, they seem to provide similar functionality: A location on the page for my application to place subviews, plus some additional event binding fairy dust. Looking under the…
Brant Bobby
  • 14,956
  • 14
  • 78
  • 115
41
votes
3 answers

Expected a spy, but got Function

I am trying to implement a test (1) for this module (2). My purpose is to check if the collection is fetched when a particular event is triggered. As you can see from my comment in (2) I get the message Error: Expected a spy, but got Function. The…
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134
30
votes
5 answers

Turning off div wrap for Backbone.Marionette.ItemView

I'm looking at the Angry Cats Backbone/Marionette tutorial posts here http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/ http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/ and I came upon the…
mrk
  • 4,999
  • 3
  • 27
  • 42
29
votes
3 answers

How to access a composite view from an item view instance in Backbone Marionette

The basic situation is this: I have a Composite View and an Item View. I construct the Composite view passing it a model and a collection. The model data is used to populate the template for the Composite view. The collection data is used to…
user911625
29
votes
1 answer

Backbone.Marionette onRender callback fires before view is rendered in browser?

The setting I have Backbone.Marionette.ItemView which renders some content. When the content is rendered I'd like to apply a jQuery plugin which turns part of the view into a container with a scrollbar. The scrollbar is implemented completely in…
Ruben Vreeken
  • 956
  • 1
  • 13
  • 22
27
votes
2 answers

Handlebars template - "tilde" in if statement

We have statement like: {{~#if someCondition ~}}
{{~/if~}} What is the difference between simple if statement and if statement with "~" in handlebars templates?
vvahans
  • 1,849
  • 21
  • 29
23
votes
2 answers

Marionette ItemView how to re-render model on change

I'm using Handlebars template engine. so, I have Model: Backbone.Model.extend({ urlRoot: Config.urls.getClient, defaults: { contract:"", contractDate:"", companyTitle:"", contacts:[], …
Vadim Ivanov
  • 633
  • 1
  • 7
  • 16
21
votes
1 answer

What is the difference between url vs urlRoot

I would like to know what is the difference between using url or urlRoot. I have read the documentation (backbonejs.org/#Model-url), but I still feel that I lack knowledge in this area and I would like to know more. When do you have to use url? And…
Monece Solis
  • 683
  • 2
  • 6
  • 23
21
votes
2 answers

Marionette.CompositeView, how to pass parameters to Marionette.ItemView

I would like to access the app.vent from Marionette.ItemView. Maybe an option could be to pass a parameter (app.vent) to Marionette.ItemView from Marionette.CompositeView. Here my code: // view/compositeView.js define([ 'marionette', …
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134
20
votes
1 answer

When to use bindTo, bind or on with Backbone.Marionette?

This time I'm struggling with the different methods to bind events. I've all the mentioned methods in my code. I just don't know, if I'm on the right way. Maybe I should always use bindTo to ensure that my views are closed completely after a change…
rzschoch
  • 358
  • 5
  • 13
20
votes
4 answers

Extra wrappers in Backbone and Marionette

Using Backbone and Marionette, I've created a new layout that goes into the main content div on my page. The layout looks like this:
Will Hitchcock
  • 4,648
  • 3
  • 22
  • 32
18
votes
5 answers

keyPress event not firing in Android mobile

I am using backbone,marionette for my Application.I used same code for both desktop and mobile but keypress not working in mobile.I made a Jsfiddle for testing. If you open this link in mobile event not firing,If you open in desktop it's firing.How…
user3279058
  • 549
  • 4
  • 7
  • 22
18
votes
4 answers

marionette.js view difference between onShow vs onRender?

I am new to Marionette.js and while I am refactoring my existing Backbone.js code, I noticed there are two callbacks on Marionette view (itemview) that looked to me similar, i.e. onRender and onShow. What is the difference and better way of using…
addisu
  • 634
  • 1
  • 4
  • 12
18
votes
2 answers

Listen to a specific attribute changes in a model in a nested collection in Backbone

I have the following backbone structure: - collection[order_items] - collection[menu_items] - price - quantity and I want to listen for any changes in the quantity attribute, I got it working by var CheckoutView =…
Yehia A.Salam
  • 1,987
  • 7
  • 44
  • 93
17
votes
1 answer

backbone.js collection view example using marionette template

Can you please suggest me some example for showing list view through marionette template system. Basically, I have a marionette template and based on the template i am creating a table list.
kulls
  • 845
  • 2
  • 12
  • 37
1
2 3
99 100