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

how to navigate one page to another view?

I am trying to make simple app in backbone .Actually I want to call methods when url change .I want to learn how backbone routing works .I studied routing but my alert is not display when I change the url . When I append the url with this…
user944513
  • 12,247
  • 49
  • 168
  • 318
0
votes
1 answer

Marionette views not adding a line break after each element

I'm trying to create a simple list using Marionette's CollectionView and ItemView. iv = Marionette.ItemView.extend({ tagName: "li", className: "card", template: _.template("empty-template") }); cv = Marionette.CollectionView.extend({ …
JayC
  • 2,014
  • 4
  • 15
  • 25
0
votes
1 answer

Two BackboneJS fetches and data gets swapped

This is our code inside a single function. I'm just beginning to get better with BackboneJS. // let's pull desktop data this.desktop = new desktopItemModel({device: 'desktop'}); this.desktopPromise = this.desktop.fetch(); // let's pull mobile…
devwannabe
  • 3,160
  • 8
  • 42
  • 79
0
votes
1 answer

How do I use a Router with an App in Marionette JS

I'm new to Marionette, and am stuck on the concept of how to establish the AppRouter with the App. I have code to start up my router, and it works: var App = new Marionette.Application({ onStart: function(options) { console.log('this…
vintorg
  • 217
  • 4
  • 17
0
votes
1 answer

Submodule becoming "undefined" in Backbone.Marionette app

I'm making a Marionette app for uploading files and I'm at the very beginning of it. To start things off, I will show you the files I'm working with: upload_view.js AppManager.module("PrimaryApp.Upload", function(Upload, AppManager, Backbone,…
chadb768
  • 473
  • 1
  • 8
  • 16
0
votes
2 answers

Backbonejs determine which function returned a response from the model to the view

I have a view.js and a model called user.js user.js : define( function ( require, exports, module ) { "use strict"; var Backbone = require( 'backbone' ); return Backbone.Model.extend({ defaults: { flush: false …
Yeak
  • 2,470
  • 9
  • 45
  • 71
0
votes
2 answers

Separating a `Backbone` collection (events issue)

So, the problem is next: I receive large collection of prices and there are prices for specific, let say, partners. Thus collection contains some kind of groups denoted by partner_id. I filtering this collection (using collection.filter() in…
0
votes
1 answer

Marionette AppRouter Include "/" Character in Route Params

How might I go about making the above happen? For instance, if a user navigates to this URL: app.com/#search/test.com/index.html with this router set up in a controller to catch it: var searchRouter = new Marionette.AppRouter({ controller:…
Bloodyaugust
  • 2,463
  • 8
  • 30
  • 46
0
votes
2 answers

serializeData function vs Marionette.renderer for custom data

I've noticed Marionette is very un-opinionated as far things go for the freedom they give you to choose a method to render data. It seems like there are a lot of ways to initially render a template with custom data Returning a template with…
Yahkob
  • 104
  • 7
0
votes
1 answer

Backbone collection.reset()

So there's a piece of functionality with which I've been struggling for a while now. I'm using .where() method in order to retrieve an array of objects from the Collection and then I reset this Collection with this array. # Fetch the collection …
curious_gudleif
  • 572
  • 1
  • 4
  • 19
0
votes
1 answer

Event handling in nested compositeView

I am using the same structure as explained in the answers for this question -- > How to handle nested CompositeView using Backbone.Marionette? to render my composite views and Item view. My Item view consists of LI tag. I want to handle click event…
Apurva
  • 21
  • 1
  • 3
0
votes
2 answers

backbone js model parse function with multiple functions

Im fairly new to backbone and running into a weird problem I have a model that looks like so: define( function ( require, exports, module ) { "use strict"; var Backbone = require( 'backbone' ); return Backbone.Model.extend( { …
Yeak
  • 2,470
  • 9
  • 45
  • 71
0
votes
2 answers

Change "this" scope for backbone collection.create

I do this in a dirty way, wondering if there's a nicer way: this.collection.create( { 'name': this.$('.name').val() }, { success: function() { alert(_this); }, error: function() { …
Mihai Vinaga
  • 1,059
  • 2
  • 10
  • 27
0
votes
1 answer

Handlebars helpers within {{#each}} iterator not working

I made a template helper called "$" within my Marionette setup templateHelpers:function(){ return jQuery.extend(this,{ '$':function (text){ return Handlebars.compile('{{'+text+'}}')(this); } }); }, this allows me…
Mark Lester
  • 363
  • 4
  • 13
0
votes
0 answers

requirejs keeps reloading all my dependencies

I have a Backbone.js web project structured as the following: ├───container │ container.html │ ContainerView.js │ ├───home │ home.html │ HomeView.js │ └───search houses-list-template.html …
JayZee
  • 851
  • 1
  • 10
  • 17