backbone.js,marionette , What is the correct way to override Marionette compositeview render

What is the correct way to override Marionette compositeview render


Tag: backbone.js,marionette

I am showing a table view using Marionette's composite view. The composite view's template has a tbody with an initial which shows a loadding animation gif.

Now, when the render method is called, I want to remove this initial row and then append the results of collection fetch. However the default render implementation of Marionette seems to be appending to the tbody.

My item template for item view:

<td><input type="checkbox" class="checkboxContact" id="<%-id %>"/></td>
<td><%-name %></td>
<td> <%-msisdn %></td>
<td> <%-email %></td>
<td> <%-address %></td>
<td> <%-last_modified_time %></td>-->
  <i rel="tooltip" class="fa fa-pencil-square-o actions"  id="editIcon" title="edit"></i>
  <i rel="tooltip" class="fa fa-trash-o actions" title="delete"></i>

The overridden render method, as below.

render: function() {
  if (this.collection.size() <= 0) return;

  return this;

I also tried

render: function() {
  if (this.collection.size() <= 0) return;

    collection: this.collection.toJSON()
  return this;

None of these work.


I don't think you should be overriding your render. Marionette knows how to render things. I'd consider changing how you are implementing the spinner.

You may want to put a spinner onShow and turn it off after the collection syncs

When the collection updates your view will rerender. You can listen to before:render:collection and wipe out the row at that point if you want.


Backbone.Deferred.Model: Why the unittest is not run?

Here is the code in question. define (require) -> Backbone = require 'backbone' require 'backbone-deferred' class Data extends Backbone.Deferred.Model urlRoot: 'data' parse: (resp) -> resp.record or resp isValid: -> @get 'valid' # Newly introduced dataUrl: -> @get('data_url')?.replace /abc/, '' And here is the unit test define (require) -> Data =...

Extend Coffeescript subclass function from parent in marionette

I've got a "FormView" class in my Marionette application that sets up a lot of things for form submissions around my app. I use it every time there is a form. I've also got some helpers that I want to pass into every form template via the templateHelpers method, but...

How to let Webpack require a root node_module instead of an child package?

I have installed backbone and backbone.babysitter trough npm. When I use backbone in my scripts like this: import Backbone from "backbone"; It loads the installed backbone version 1.2.1. This works fine until I want to use backbone.babysitter. When backbone.babysitter loads it needs to add properties to backbone itself. But the...

Marionette - listenTo a custom event triggered from a collection

I'm using a Event Aggregator(EA) to keep track of all events in my app. But there is one situation I could not make the EA listen to a custom event triggered from a collection. See more details below. eMgr (Event Manager i.e Event aggregator): define(['backbone.wreqr'],function(Wreqr){ "use strict"; return new Wreqr.EventAggregator();...

Marionette CompositeView - change in template each nth items

I'm using Marionette for a while, but I'm not sure how I can do what I want, in a simple manner. I have a composite view, which renders something like this: <div class="row"> <div class="col-xs-12"> <div id="items"></div> </div> </div> Each of my item is being rendered as a: <div class="col-xs-3">foo</div>...

What is the use of HTML5 pushState in Backbone History Start method

I have a simple Backbone app. I am trying to understand the difference created by passing pusState: true when starting Backbone.History object. JavaScript var r = new (Backbone.Router.extend({ routes: { "users": "allUsers", "users/new": "createUser" }, allUsers: function () { v.render("showing all users"); }, createUser: function () { v.render("showing form for...

backbone - preventing same view from overlapping

Let say a each row in a table got its own view and a model (CollectionViews). Each row got a button for editing the row data. When clicked an EditView is activated for the current row and model where a form is presented to the user with textfield and cancel...

passing backbone collection to view

I'm just starting out with backbone / grails and i've been struggling to figure out how to get everything to work. I'm building a pricing configurator where a user selects a product type from radio group A and radio group B containing the quantity / pricing / discount data will...

Backbone view listening to model, not firing on change or reset?

I am using a model to fetch location data from a service using POST. However I am struggling to get the view to listen to that model when it finally receives a response. Note I have overriden some model methods to fit the service I am using. Model code define([...

backbone persistent login - login removed on browser quit

I am working on a backbone application that hooks into RESTful API. One problem I having at the moment, is that a user can be logged, they can then close there browser, reopen it go to my application and be logged out. Is is possible to make a login persistent...

how to use bootstrap mergeCells dynamically in backbone.js

I have a function which creates a bootstrap table and i have to merge only specific columns in that table dynamically. this.$('#Table1').bootstrapTable({ striped: false, minimumCountColumns: 2, smartDisplay:true, clickToSelect: false, columns:[ { field:'Key2', title: $.t('report:'+code+'.Col2'), align: 'left', valign: 'middle', sortable: true, events : this.linkEvents formatter :this.linkFormatter } ] }); linkEvent function:...

Backbone.js remove model from collection

I'm learning Backbone and for the life of me I can't remove a model from a collection. The collection 'remove' event fires, but the collection appears to remain the same. Here's what I have so far:,output I remove the model from the collection upon click. Then, the list view...

Backbone's success callback called before jquery's ajaxSuccess

I would like to make sure that jQuery's ajaxSuccess callback is called before Backbone's success, which is not the case in my experience. I would like this someModel.fetch({ success: function() { console.log('2'); } }); $(document).ajaxSuccess(function(event, xhr, ajaxOptions) { console.log('1'); }); to log 1, 2 and not 2, 1. The reason...

Underscore templates with Backbone

I'm completely new in backbone framework. I have a model itemsOnSaleModel that contains an array of items and a View itemListView that render these items. The problem is that I can't figure out how to write the template correctly. Usually in this case I would have written something like this:...

backbone stickit - reverting model changes

I'm now testing backbone stickit for two-way data binding. Is there a way to revert the changes, for example, while editing a model data through a form, the user press the cancel button, as in the pic below It seems the model was changed on the fly as we type...

CSS Selector Equivalent Of jQuery.find in backbone.js?

I have a Marionette view that has the following code: onRender: { $('#someDiv').find('a').click(function(){ // some code here }); } But I want to refactor to something like this: events: { 'click [selector here]': 'executeCode' }, executeCode: function() { // some code here } Is this possible?...

Truncate everything after first 120 characters and refresh

I'm quite new to UI development. I have a textfield. (input) where the user enters a string for SMS. I want to discard all the characters which are more than 120. I have written code for this one. Problem: if the user enters more than 120 characters, how do I...

Handlebars: return hash from helper

Can i return hash from Handlebars helper? I tried this: In my view: initialize: -> super this.hash = {key1: 'test1', key2: 'test2'} Handlebars.registerHelper 'show', => return this.hash In template: {{show.key1}} What am i doing wrong? Thanks!...

Dropzone.js status is pending and not uploading a file

I am using Multer in back-end to handle file upload and Dropzone.js in front-end. Everything is fine when I use Postman to test my back-end code, but in when I use Dropzone the status is pending and file not getting uploaded. Then after 4 minutes of waiting I get Timeout...

Do backbone marionette.js parent view bubble down?

I reference this question and document I know how to bubble up. But in my situation, I want to bubble down. Just like I click a button on parent view then trigger some function of all my childview. var parent = Marionette.CompositeView.extend({ triggers: { 'click #edit': "??" // trigger the...

Backbone.js collection fetch not setting response objects as models

When fetching a collection, my api response has 10 objects, but the resulting Backbone collection only has 1 model with an attributes array containing the 10 response put it another way, the fetch is not creating models out of the objects in my response...and I don't know why. Model...

Backbone.js - Model's attribute is not getting passed to view correctly

I am very new to backbone and trying to understand why "title" is not getting passed to view and printing correctly. If I create model with title properties it passes to view and prints fine. Any pointer will be greatly appreciated. HTML: $(document).ready(function(){ //Model var Appointment = Backbone.Model.extend({ urlRoot :...

Javascript DOM elements hide class and the element not present are same?

I am currently working on a project where most of the code has been written by someone else . I was supposed to do some slight modifications in the existing script to incorporate changes in a new file. I came across a situation where it was very confusing . The...

Persisting data client side for event driven approach

I have an application that renders activities and looks like this: The map should render markers based on some criteria (date_start, date_end, map_bounds). Activities are loaded from a REST api with ajax. The front end approach is event driven (using Backbone / Marionette); activities are dynamically udpated when the date...

bacbone marionette pass variable to view method

I have simple situation and can't understand why variable that I pass to function always undefined. var ProjectItemView = Backbone.Marionette.ItemView.extend({ template: "#ProjectItemTemplate", initialize: function () { var id = this.model.get('project_id'); $.getJSON('service/api.php/projects/' + id + '/progress').done(function (data) { this.renderProgress('4'); //<== pass here }); }, renderProgress: function (why) { alert(why); //<== undefined...

Add two events in backbone.js

I added two jQuery events, the second jQuery event is not triggering. What might be the issue? Here is my code : var ListView = Backbone.View.extend({ events: function() { $('#couponcheck2').click(function(e) { e.preventDefault(); $('#couponcheck').empty(); $('#couponcheck').append('<div class="col-xs-8"><input type="text" class="form-control" id="enterCoupon"></div>'); $('#couponcheck').append('<div class="col-xs-8"><button type="button" class="btn btn-success btn-sm" id="couponbutton"><span...

How to inherit and add events in child in backbone.js

I have tried this solustion but couldn't get it working. So situation is there a parent which doesn't have any event defined. I can not make any change in parent. I can make changes only in child modules so I need to have two child modules both adding a different...

BackboneJS : the model is fetched, but toJSON() and get() methods don't work [duplicate]

This question already has an answer here: View's collection only working in console.log 3 answers Still learning Backbone, here is my code const API_URL = ''; const API_KEY = '********************************'; var Categories = Backbone.Model.extend({ url: API_URL + '/categories/?key=' + API_KEY }); var CategoriesView = Backbone.View.extend({ tagName: 'ul', id: 'categories',...

What is the correct way to override Marionette compositeview render

I am showing a table view using Marionette's composite view. The composite view's template has a tbody with an initial which shows a loadding animation gif. Now, when the render method is called, I want to remove this initial row and then append the results of collection fetch. However the...

Delete single model from collection in Backbone.View

var PlayersView = Backbone.View.extend({ collection: players, //collection of players el: "#playersList", //I bind to the class render: function () { this.$el.html(""); for (var i=0; i<this.collection.size(); i++) { var player =; this.$el.append("<li "+"value='"+player.get("id")+"'>"+player.get("names")[0]+" "+player.get("surnames")[0]+" <a href='#' class='edit'>[edit]</a>"+"</li>"); } //what I render is in the picture below return this; }, events:...

How to access Rails configuration info in Backbone View?

I'm trying to implement Stripe into a Rails app with a Backbone front end. In a normal rails view, I can do this: <%= form_tag charges_path do %> <article> <label class="amount"> <span>Amount: $5.00</span> </label> </article> <script src="" class="stripe-button" data-key="<%= Rails.configuration.stripe[:publishable_key] %>" data-description="Launch Survey" data-amount="<%= @amount %>"></script> <% end %> And...

Backbone JS - Combination of collection, views and models

I had the following setup now in three different projects, so I thought maybe it's worth asking here. There's a chance I'm not the only guy wondering about this. So there it comes: I have a list of objects The list items have a special function like draggable or onClick-Events...

Grab data attribute from an event

I have a jQuery event which is part of a backbone class that I am trying to grab the data-attribute from called 'data-foreground' My function looks as follows.. foreground: function(e) { if ( === "") { this.findClickedElement(e, "li"); return false; } console.log(; // this returns the id which is '115'...

Where to format collections / objects

From front end architectural point of view, what is the most common way to store scripts that perform transformations on collections of objects/models? In what folder would you store it, and what would you name the file / function? Currently I have models, views, controllers, repositories, presenters, components and services....

Comparison Express JS, Angular JS vs Backbone JS [closed]

I am starting to learn node js for a while and it seem amazing. When I start to apply nodejs to build a scalable website, I am wondering to do Express for back-end, BackBone Js or Angular JS for front-end, people said Express JS is very fast, while Backbone.js seem...

Why `init` of shim in my require.js configuration not called?

Update: I was writing a small module to handle this csrf token problem in backbone until I got push notification of @Louis's answer. His answer is quite elegant and seems nice, but I'll leave a link to my backbone.csrf module github repo just for anyone who needs it. ==================================================================== I'm...

Merge two object arrays for Chart

I've two arrays which I'm going to merge and then load in chart. range = date array generated from moment.js, there is date of every day in example one month or specific date range with one another attribute count: "0" data = fetched data from database through backbone Now I...

Can't call fetch directly in Backbone model listenTo

I'm trying to have a model listen to a collection and fetch itself when the collection changes: class Team extends Backbone.Model urlRoot: '/team', initialize: function(attributes, options) { this.listenTo(members, 'change', this.fetch) The fetch does seem to trigger, but the url is all messed up, and to get it to work I...

Can I use Backbone with React Native?

I have found several different examples of integrating React (View) with Backbone on the web, but not any to do the same with React Native. I was wondering if this was possible and also if there were any samples to play with. This ( also seemed a good starting point,...

CollectionView - collection data not being passed to childView

I'm trying to make the collectionView work , but I'm not really sure whether the CollectionView initiates the fetch method automatically and then populates the ChildViews with the fetched data. Or is it something I need to do manually? I have checked the Marionette doc page but I couldn't find...

Backbone this.el is undefined

I've been following along to the a tutorial i found on youtube. In the tutorial I don't see him defining el : ... but he's calling this.$el and it appears to be working. In jsfiddle, I have been following along, but get a js error saying Backone this.el is...

Backbone render template in side el's nested id

I have my html setup like this. <div id="product-module"> <ul id="product"> <li><input name="product" type="radio"/></li> <li><input name="product" type="radio"/></li> <li><input name="product" type="radio"/></li> </ul> <table id="quantities"/> <script id="myTemplate" type="text/x-handlebars-template"> {{#each this}} <tr> <td class="quantity"> <label class="checked" for="quantity_{{id}}"> <input type="radio" value=""...

Backbone datatypes - type casting?

It just took me over an hour to find out that a Backbone query on a collection was failing because I queried the wrong data type. So this query failed because I used the wrong data type for id: element = collection.findWhere({id: "123", att: true}); This one worked and returned...