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
17
votes
2 answers

How to iterate over array in handlebar template without defined name in model

I have model: [ { "ID": 5, "email": "xx@vflbg.com" }, { "ID": 6495, "email": "email@monkey.com" } ] Code for iterating in handlebars: {{#each xxx}}

{{email}}

{{/each}} how do I define xxx ? If JSON had name…
jmav
  • 3,119
  • 4
  • 27
  • 27
16
votes
2 answers

Can't seem to cleanup detached DOM elements

I'm using jquery-ui Tabs and I'm having a problem that occurs when a tab has been removed. The tab appears to be removed, along with its content div but when you take a look at the heap in Chrome DevTools Profiles (after a tab has been removed)…
musashiXXX
  • 4,192
  • 4
  • 22
  • 24
16
votes
2 answers

Whats the Advantage of Marionette AppRouter+Controller over Backbone.Router?

From my understanding, the differences is the callback functions to events on an AppRouter should exist in the Controller, instead of the same Router object. Also there is a one-to-one relationship between such AppRouter & Controllers, all my code…
Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
16
votes
4 answers

Use Handlebars.js with Backbone.Marionette

Is it possible to use the Handlebars.js with the Backbone.Marionette extension without reimplementing the Views render function? It seems that Marionette is relying on the convention that you use Backbone.js with underscores templating engine. But I…
Johannes Klauß
  • 10,676
  • 16
  • 68
  • 122
16
votes
2 answers

What is the difference between triggers and events in backbone?

In Backbone Marionette, you can do extremely similar things with triggers and events: triggers: return Marionette.Layout.extend({ triggers: { 'click .something': 'view:handleClickSomething' }, initialize: function(){ …
cmcculloh
  • 47,596
  • 40
  • 105
  • 130
16
votes
2 answers

Backbone Marionette and RequireJS Modules

I'm beginning a large scale javascript application with Marionette. A Marionette application has a concept of application Modules and RequireJS is also used to break code into modules, currently I have this for the start of my application: require([…
Adam Langsner
  • 1,276
  • 1
  • 15
  • 23
15
votes
1 answer

What to use since Marionette Application Regions are deprecated

I am confused by the Marionette (2.3.0) documentation from the link below that says the Application Regions feature is deprecated. A Layout View should be used instead. Does that mean I should not use MyApp.addRegions() any more? Then how should I…
Cassandra
  • 175
  • 7
15
votes
2 answers

Specify an HTML table's element as a region in Marionette for Backbone.js

Problem Using a Backbone.Marrionette.Layout to present some tabular data. The portion of the table is a Backbone.Marionette.Region that is meant to display a Backbone.Marionette.CollectionView. I can not figure out how to do this using…
Chris Dutrow
  • 48,402
  • 65
  • 188
  • 258
14
votes
1 answer

WordPress NinjaForms JavaScript API before submit

I'm using WordPress Ninja Forms and I'm trying to create a form preview which has to be accepted before the Data is sent via Ajax. That means I need to add custom JS-Code between the form validation and the submit process. So far I tried the…
Nico Martin
  • 1,268
  • 1
  • 14
  • 23
14
votes
2 answers

Difference between marionette events

I am reading the marionette.js docs and I don't understand the difference between vent, reqres and commands. The only thing I clearly understood is that commands should not return anything. Can anyone explain it a little bit?
Dieguin
  • 176
  • 1
  • 5
14
votes
1 answer

Backbone Marionette get region view

I have a marionette layout that has a region with a view inside. How can I get a reference to that view? For example: var layoutView = Backbone.Marionette.Layout.extend({ regions: { myRegion: '.some-element' }, initialize:…
Vic
  • 8,261
  • 6
  • 42
  • 55
14
votes
3 answers

Availability of UI elements in Marionette.View

I'd just like to understand the decisions behind Backbone.Marionette's view regarding UI elements. When instantiating a Marionette.View on an existing DOM element, like this: view = new Marionette.ItemView({ el: "#element", ui : { …
Filip Novotny
  • 397
  • 1
  • 4
  • 9
14
votes
4 answers

Debugging Javascript (Backbone and Marionette)

Right now, while I am debugging backbone or marionette using the chrome dev tools, I end up setting break points and whatnot, but once the code pauses, its hard to tell what type of objects i'm working with because chrome labels everything a…
MattyP
  • 821
  • 2
  • 9
  • 16
14
votes
5 answers

Backbone Marionette - Add a visual effect when switching view

Is there a convenient way to add an effect when I leave a page (close a view/layout) and open a new one in the same region ? (something like a fade effect)
xiris
  • 351
  • 1
  • 3
  • 17
14
votes
3 answers

The best way to sort a collection in a CompositeView

I am trying to sort a collection in a Marionette.CompositeView. I have a collection which looks like this: [ {id: 1, name: 'bar'}, {id: 2, name: 'boo' }, {id: 3, name: 'foo' } ] I need to sort the collection by id in reverse…
js999
  • 2,063
  • 4
  • 26
  • 34