Backbone with dynamic views

Question

I am trying to achive something like this in backbone js

var AppRouter = Backbone.Router.extend({
    routes: {
        // MVC like route
        ':controller': 'defaultRoute',
        // MVC like route
        ':controller/:action': 'defaultRoute',
        // MVC like route
        ':controller/:action/:id': 'defaultRoute',
        // MVC like route
        ':controller/:action/*id': 'defaultRoute'
    },
    defaultRoute: function (controller, action, id) {
        // render view here or 
        // call another specific route regarding to controller parameter
    }
});

var appRouter = new AppRouter;
Backbone.history.start();

So when url is: something.com/#home/index defaultRoute function will get parameters controller="home" and action="index". I am wondering now how to find view (Backbone.View) in folder "controller/home/index" and instantiate dynamically (and render). Also wondering if better approach would be to have Backbone.Router for each "controller" (I am using name "controller" but it is actually "router").

Any ideas?

UPDATE with possible solution!

I ended up with this

    // Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone'
], function ($, _, Backbone) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            // MVC like route
            ':controller': 'defaultRoute',
            // MVC like route
            ':controller/:action': 'defaultRoute',
            // MVC like route
            ':controller/:action/:id': 'defaultRoute',
            // MVC like route
            ':controller/:action/*id': 'defaultRoute'
        },
        defaultRoute: function (controllerName, actionName, id) {
            controllerName = controllerName || Config.Defaults.Controller;
            actionName = actionName || Config.Defaults.Action;
            require(["controllers/" + controllerName], function (ctl) {
                var code = "ctl." + actionName + "();";
                eval(code);
            });
        }
    });

     var appRouter = new AppRouter;
        Backbone.history.start();
});

And sample controller is this

define([
  'jquery',
  'underscore',
  'backbone'
], function ($, _, Backbone) {
    return {
        index: function () {
            console.log("Action: Index");
        },
        about: function () {
            console.log("Action: About");
        }
    };
});

It works with this sample. Now trying to solve params binding etc. Need more testing.

nice work, it's 2015, i will steal your idea :) – Alexander Mills Jul 31 '15 at 06:14 — Alexander Mills, Jul 31 '15 at 06:14

score 1 · Answer 1 · answered Aug 13 '12 at 07:50

At this time I am still investigating but here is the code I am using at the moment:

    // Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone'
], function ($, _, Backbone) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            // MVC like route
            ':controller': 'defaultRoute',
            // MVC like route
            ':controller/:action': 'defaultRoute',
            // MVC like route
            ':controller/:action/:id': 'defaultRoute',
            // MVC like route
            ':controller/:action/*id': 'defaultRoute'
        },
        defaultRoute: function (controllerName, actionName, id) {
            controllerName = controllerName || Config.Defaults.Controller;
            actionName = actionName || Config.Defaults.Action;
            require(["controllers/" + controllerName], function (ctl) {
                var code = "ctl." + actionName + "();";
                eval(code);
            });
        }
    });

     var appRouter = new AppRouter;
        Backbone.history.start();
});

So "controller" looks like

    // Filename: controllers/home.js
define([
      'jquery',
      'underscore',
      'backbone',
    ], function ($, _, Backbone) {
        return {
            index: function () {
                require(['views/home/index'], function (view) {
                    view.render();
                });
            },
            about: function () {
                require(['views/home/about'], function (view) {
                    view.render();
                });
            }
        };
    });

Next is to create typical backbone views.

I will post more when I test passing parameters and do some more complicated tests.

one question, though: how do you require an entire directory (controllers) with requirejs? surely you don't want to define the paths to each file individually in the config file? or is there no way around this? Basically, I am looking for a way to use requirejs with an entire folder, recursively. — Alexander Mills, Jul 31 '15 at 08:47

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

JS client side dynamic dependency loading, I think this is still in our dreams.

You can play with very tricky technics like Dynamic Script Loading but even if it looks easy at the beginning it is gonna become in a nightmare (sooner or later).

If you need a technic like this be sure it worths it, you should try to think it again.

About if to use one Router for the whole application or separate it in several Routers by controllers/modules or whatever I have already said my opinion about.

edited May 23 '17 at 12:21

Community

1
1

answered Aug 09 '12 at 10:58

fguillen

36,125
23
149
210

1

Isn't requirejs library solving dynamic loading issue? – Andrej Kaurin Aug 09 '12 at 14:19
@AndrejKaurin I've never used _RequireJS_ but I think it only offers a system to load scripts on the _page load_ and not _on demand_. – fguillen Aug 09 '12 at 14:24
1

RequireJS offers system to load sripts on demand. Just tested really deep on demand case. – Andrej Kaurin Aug 12 '12 at 18:30
1

@AndrejKaurin good to know, you should add an answer to your own question so everyone else can learn from it. – fguillen Aug 12 '12 at 18:46

Backbone with dynamic views

2 Answers2