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
0
votes
1 answer

Updating multiple models on Backbone.Marionette

Using Marionette and Coffeescript. I am working on allowing users to check a box on a view's model and then change one attribute on all checked models (like you can do in Gmail, for example). Right now I am planning on setting the id of the checkbox…
jacob.mccrumb
  • 681
  • 5
  • 18
0
votes
2 answers

Making JointJs & Backbone/Marionette work with collections (HTML items inside)

Let me know if you can help me out somehow, i'm kind of struggling to get my head around. Starting with some Marionette application logics: app.js //basic setup this.Graph = new joint.dia.Graph; this.Paper = new joint.dia.Paper({ width: 640, height:…
Tom Siwik
  • 992
  • 9
  • 22
0
votes
1 answer

application.rootView.getRegion(...).show is not a function

I have a root layout with two regions. One of them is simple ItemView, but another is LayoutView. When the second region try to show a LayoutView i receive an error application.rootView.getRegion(...).show is not a function in console. Can anyone…
Evgeniy
  • 3,219
  • 5
  • 25
  • 40
0
votes
0 answers

How to render collection in compositeview in marionette

I want to display movie list in compositeview but template is iterated and displayed. $(function(){ var app = new Backbone.Marionette.Application(); app.addRegions({ appRegion: '#AppBase' }); …
Pratig
  • 148
  • 3
  • 12
0
votes
2 answers

Backbone history navigate not keeping hash in url

I want to use hashes in my urls. when i use the code below, the url goes to kart/:nid but not #kart/:nid as i want it to. I have not enabled pushState:true in my code so that should not be the problem. Backbone.history.navigate('#kart' + "/" +…
Stinis87
  • 140
  • 3
  • 14
0
votes
1 answer

Marionette - modelEvents not working

I'm trying to use the modelEvents part of the ItemView, but for some reasons, it does not work. I set up a simple test case, where I have a CollectionView with 4 ItemViews. When I click on one of the ItemView, then I change the first ItemView's…
Dave
  • 49
  • 8
0
votes
2 answers

Pass a property of the model to the template in ItemView

I want to pass a property of my model to the template, so I presume I need a serializeData function, I tried this serializeData:function(){ return this.model.toJSON().extend({_schema:this.model.schema}); } but it complained about not being able…
Mark Lester
  • 363
  • 4
  • 13
0
votes
1 answer

i18n with Marionette.js

I have downloaded require.js i18n plugin to give some translation to the views, they use handlebars templates but the strings between the html tags are not enclosed in curly braces. The templates are loades using hbs! I'm a beginner and after much…
JjAA
  • 13
  • 2
0
votes
1 answer

How to create Marionette.js reusable components

Im pretty new to Marionette.js / Backbone.js but I have a lot of experience with Angular and most recently React. I have a Marionette app and in that app we have a special form control that creates tags and makes suggestion, something like this…
franleplant
  • 629
  • 1
  • 7
  • 17
0
votes
1 answer

Re-render ItemView throw Controller

I have one ItemView, then I send throw .trigger() to another controller Message View Bintime.module("Message.Input", function(Input, Bintime, Backbone, Marionette, $, _) { Input.Contacts = Marionette.ItemView.extend ({ template: "#new", …
AleshaOleg
  • 2,171
  • 1
  • 15
  • 29
0
votes
1 answer

Add data to model from input

I want to know how to add data to mode, from my input. Here is my code: Main file var Bintime = new Marionette.Application(); Bintime.on("before:start", function(){ var RegionContainer = Marionette.LayoutView.extend({ el: "#app", …
AleshaOleg
  • 2,171
  • 1
  • 15
  • 29
0
votes
1 answer

Marionette CompositeView not rendering recursively

I am trying to cause Marionette's CompositeView to render recursively by not specifying a childView. jQuery is giving me the following error: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains…
Ben
  • 5,085
  • 9
  • 39
  • 58
0
votes
1 answer

What is the best way to add model in a collection from view?

I have a Backbone Marionette app with Router and a Controller. In my app you can view a collection of texts (index route with collection fetching from server), can view existing collection of texts (indexPage route without fetching from server) and…
Evgeniy
  • 3,219
  • 5
  • 25
  • 40
0
votes
1 answer

Backgrid doesn't render the grid with the updated collection

I'm using Backgrid and I create the Backgrid Object as follows in my Controller: $.when(recipeRequest).done(function (recipes) { List.grid = new Backgrid.Grid({ columns: columns, // where columns is defined elsewhere collection:…
Linda Keating
  • 2,215
  • 7
  • 31
  • 63
0
votes
2 answers

Insert rendered view after base element

So I have a compositeView. CompositeView is an "ul" element with base first "li" element and a collection of another "li" elements. My objective is to insert each rendered child collection of elements after base "li" element. My views…
Evgeniy
  • 3,219
  • 5
  • 25
  • 40