We Keep Coding

How to remove Backbone views with require.js?

I have a backbone app that uses require.js.
Prior to using require my Backbone router looked something like this.
APP.views = {};
APP.Router = Backbone.Router.extend({
routes: {
'(/)' : 'index',
'about(/)' : 'about'
},
initialize : function(){
Backbone.history.start({ pushState: true });
},
index: function() {
this.showView( new APP.Views.IndexView() );
},
about: function() {
this.showView( new APP.Views.AboutView() );
},
showView : function( view ) {
if ( APP.views.current ) {
APP.views.current.remove();
}
APP.views.current = view;
$( '#page' ).html( view.render().$el );
}
});
I would stash the 'current' view in a global variable and kill the existing view each time a route was changed and life was good.
But, how do I achieve this with require.js ?
My requirejs router currently looks like the following but I'm not sure how to remove the existing views. Although, I have not noticed any of the typical "zombie view" symptoms I feel like I should be removing the existing views.
define( function( require ){
// DEPS
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone');
// ROUTER
var Router = Backbone.Router.extend({
routes: {
'(/)' : 'index',
'about(/)' : 'about'
},
initialize : function(){
Backbone.history.start({ pushState: true });
},
index: function(){
this.showPage('index');
},
about: function() {
this.showPage('about');
},
showPage : function( pageName ) {
var view = 'views/pages/' + pageName;
require( [ view ] , function( Page ) {
var page = new Page();
$('#page').html( page.render().el );
});
}
});
return Router ;
});

Even before using require.js, a global wasn't needed.
Just put the current view into a router property.
initialize : function() {
this.$page = $('#page');
Backbone.history.start({ pushState: true });
},
showView : function(view) {
if (this.current) this.current.remove();
this.$page.html((this.current = view).render().el);
}
Then, same thing applies to your async require case:
showPage : function(pageName) {
if (this.current) this.current.remove();
var view = 'views/pages/' + pageName,
self = this;
require([view], function(Page) {
self.$page.html((self.current = new Page()).render().el);
});
}
But even then, I don't feel like requiring each view with an async require is worth it. You're just slowing down your application with a lot of extra requests.
Just define the dependencies for each module.
define([
'jquery',
'backbone',
'views/index',
'views/about'
], function($, Backbone, IndexView, AboutView){
// ...
});
While in development, you'll see a lot of request each time you refresh, but when ready for production, build a minified bundle of all the js files with require optimizer.
Also note that you can have module scope global, which are just local variable declared at the root of a module scope (IIFE or with require.js).
(function() {
var currentView;
var Router = Backbone.Router.extend({
// ...snip...
showView: function(view) {
if (currentView) currentView.remove();
this.$page.html((currentView = view).render().el);
}
});
})();

How to define and trigger Backbone route with get params?

I have the following routes:
var Workspace = Backbone.Router.extend({
routes: {
"": "index"
},
index: function() {
...
}
});
At now I can trigger this route like this Backbone.history.navigate('', true); and all works fine. But now I need to add GET params to that router to be possible trigger and handle route like this:
var Workspace = Backbone.Router.extend({
routes: {
"?:query": "index"
},
index: function(query) {
...
}
});
But unfortunately my index callback don't get executed when I trigger Backbone.history.navigate('?needShowPopup=true', true);
How should I define and trigger route to pass and handle GET parameters for my index route?

I would do that
var Workspace = Backbone.Router.extend({
routes: {
"*": "index"
},
index: function() {
var query = location.search;
// work with query
}
});
Let me know if you get a problem.

Ember.js Won't Accept Root URL

I am trying to create an Ember.js app on a domain that has a ton of different sublevel sites. I'm trying to set my rootURL to '/org/new/' like the docs say so that the root URL will be mydomain.com/org/new/. I'm using the following router code:
App.Router.reopen({
rootURL: '/org/new/'
});
App.Router.map(function() {
this.resource('carouselItems', { path: '/' }, function() {
// child routes
});
});
App.CarouselItemsRoute = Ember.Route.extend({
model: function() {
return this.store.find('carouselItem');
}
});
However, my app keeps trying to load mydomain.com/carouselItems instead. I have a CarouselItemsController that extends ArrayController and a CarouselItemController that extends ObjectController. Both are used when the user navigates to mydomain.com/org/new/ to generate some items in a Bootstrap carousel.

Ember.js Error in specifying URL type of location='history' in App.Route

I have started learning the ember.js framework and I am stuck at how to use the setting of the URL type feature that the framework has.
http://emberjs.com/guides/routing/specifying-the-location-api/
I have this simple application.js
App = Ember.Application.create();
App.Router.reopen({
location: 'history'
});
App.Router.map(function () {
this.route('about');
});
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return appdata;
}
});
App.IndexRoute = Ember.Route.extend({
setupController: function (controller) {
// Set the IndexController's `title`
controller.set('indextitle', "My Index title");
},
renderTemplate: function () {
this.render({ outlet: 'indexoutlet' });
}
});
App.AboutRoute = Ember.Route.extend({
model: function () {
return appdata;
},
renderTemplate: function () {
this.render({ outlet: 'aboutoutlet' });
}
});
var appdata = { mytext: '', theplaceholder: 'Enter new text', attr:'Yeap!' }
If I don't use the
App.Router.reopen({
location: 'history'
});
the application works fine and it goes to the 'about' route by appending the URL the '~/EmberjsTest.aspx#/about' as it supposed to do.
However because I do not like the hash symbol in the URL of the page, I would prefer if it was removed and to do that the guide says we should put this code:
App.Router.reopen({
location: 'history'
});
But when I do it I get an error in the Chrome console saying:
'Assertion failed: The URL '/EmberjsTest.aspx' did match any routes in your application'
What am I doing wrong?
Thanks in advance

If you want to use the history API then you have two options.
Serve your Ember app from '/' so that Ember can just work with it's "normal" index/root route.
Create a route in your Ember app that can handle '/EmberjsTest.aspx'.
this.route("index", { path: "/EmberjsTest.aspx" });
Note that if you go with option 2 you'll probably have to update all of your routes to include '/EmberjsTest.aspx' in their paths.
this.resource("posts", {path: "/EmberjsTest.aspx/posts" })

Ember explicit route

When I define a route explicitly, Ember fails to render the associated template. Do I have to specify in the route object the renderTemplate property every time I create an explicit route? Just to be more clear, here is my example:
define(['ember'],
function(Ember) {
"use strict";
var DudeRoute = Ember.Route.extend({
model: function() {
},
setupController: function() {
},
renderTemplate: function() {
}
});
return DudeRoute;
});
and if I specify in my app like this:
define([ ... ],
function(
Router,
IndexRoute,
DudeRoute,
ApplicationController,
IndexController
) {
"use strict";
/*Module Pattern*/
var App = {
LOG_TRANSITIONS: true,
Router: Router,
// Load routes
IndexRoute: IndexRoute,
DudeRoute: DudeRoute,
//Load Controllers
ApplicationController: ApplicationController,
IndexController: IndexController
//Load Models
//Load Views
};
return App;
});
The whole thing falls apart, it does not render my template. Though if I remove DudeRoute everything works fine.

OK, I figured it out. So My problem was, that I was using some automation to generate code for Route/Controller/View/templates. And what I did and you can see from the code too is that I stupidly set the renderTemplate method to do nothing. So by removing it it will work.