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

Only template itemViews who's model attribute viewable is true

I have a CompositeView which is a select box that outputs options as childViews, I want to be able to only output options who's model attribute viewable is true but I'm not sure how to achieve this on each generated element. I could move the option…
styler
  • 15,779
  • 23
  • 81
  • 135
0
votes
0 answers

Trigger event after event.preventDefault()

I had a hyperlinks in the header. When user navigates from one header link to other i need to check whether page is in dirtied or not, if page is dirtied i need to show a modal which has ok and cancel buttons and on ok i need to navigate to the…
CNKR
  • 568
  • 5
  • 19
0
votes
1 answer

Changing UI element input value doesn't display changes in input

I'm having a problem with changing an input's value. The code below works but it's only setting the html value="geolocationvaluehere", the problem is that it doesn't display the text in the input (geolocationvaluehere), it's empty. I've tried using…
Kristjan Kirpu
  • 674
  • 1
  • 7
  • 26
0
votes
0 answers

Finding where id or class was used in a Marionette application - reversed reverse engineering

I'm debugging a huge application. How would I figure out which display or render an id or class was used? It's actually the other way around rather than us right-clicking on an element then doing an Inspect Element. Problem is that I've been opening…
devwannabe
  • 3,160
  • 8
  • 42
  • 79
0
votes
1 answer

How to deal with modified models when using Backbone.history

I have this fairly simple controller+router below for example purposes. My question is: How do I deal with the router and Backbone.history if I have modified a certain model? Let's say that I fire up a router and a controller. The default route ""…
0
votes
1 answer

In Marionette JS, how can I add a field from another model to a td in a table row?

I created a table from a composite view, with a model item template: I need…
vintorg
  • 217
  • 4
  • 17
0
votes
0 answers

Backbone "add" and "update" events confusion

From the Backbone.js (1.2.3) documentation: add collection.add(models, [options]) Add a model (or an array of models) to the collection, firing an "add" event for each model, and an "update" event afterwards. In my code I want to add a new model…
curious_gudleif
  • 572
  • 1
  • 4
  • 19
0
votes
1 answer

Routing in Marionette using a Marionette Object — Can't make it work

I am trying Marionette for the first time and am very much confused about its routing. Here's what I have so far: a Backbone model, a Backbone collection, a Marionette Layout view, a Marionette Collection View, a couple of Marionette Item views. The…
azangru
  • 2,644
  • 5
  • 34
  • 55
0
votes
1 answer

How can I show and hide regions in Marionette.js?

I am trying to figure out how to use a router and controller in my Marionette.js application. I am able to start the initial page in my App's start handler, but I can't seem to figure out how to handle other routes. This SPA isn't complex, where I…
vintorg
  • 217
  • 4
  • 17
0
votes
1 answer

What is the proper way to get a Marionette app instance inside a view?

I have been trying to figure out the best way to obtain my Marionette application's instance throughout my app. I am using requirejs, however I cannot figure out if it is possible to grab the actual instance of the app through require. I have used…
Feek
  • 640
  • 6
  • 20
0
votes
2 answers

DOM location of ItemView when passed in CompositeView - Marionette

I have an ItemView like this: var Userview= Marionette.ItemView.extend({ template: "#user1", el: "#imp1" }); Question: Does this mean that template of ItemView: #user1 will go into the (say) div with id=imp1 in the DOM, when…
Vijay Singh
  • 277
  • 1
  • 3
  • 15
0
votes
1 answer

Marionette: ItemView not rendered by CompositeView

My ItemView is not being rendered by my CompositeView: My app.js: var express= require("express"), bodyparser= require("body-parser"); var app= express(); app.use(express.static(__dirname+…
Vijay Singh
  • 277
  • 1
  • 3
  • 15
0
votes
2 answers

Accessing Marionette's ItemView elements inside CompositeView

This question relates to Marionette.js Lets say I have an ItemView: ItemView1 which renders a template with a
In a CompositeView: CompositeView1, I have a template which has a
CompositeView1…
Vijay Singh
  • 277
  • 1
  • 3
  • 15
0
votes
1 answer

JQuery How to activate a button when clicked

I have pagination buttons like this:
0
votes
2 answers

How to specify filtered Backbone collection for Marionette view

I have a Marionette composite view that displays a collection, which I set in my Application start handler: App.on('start', function() { Backbone.history.start({pushState: true}); // I load up this.appsCollection in my before:start handler …
vintorg
  • 217
  • 4
  • 17