Todomvc with Backbone.Marionette + Requirejs

I recently completed an app I’m planning on using for JavaScriptU in october and wrote it in the style of Addy Osmani’s TodoMVC repo so that it can be more easily compared to other frameworks.

Backbone.Marionette + RequireJS TodoMVC (source)

It differs a little bit in the style I would normally adhere to in order to make it as simple as possible for the sake of easy comparison. I tried to inject as little of my own bias in it as possible, except for very small file sizes and global jQuery and underscore.

7 thoughts on “Todomvc with Backbone.Marionette + Requirejs”

  1. Hi Jarrod,

    I liked your Marionette/RequireJS project on Github. Can I ask, what’s the reason/benefit of using tpl! vs text! when loading your templates?

    I use underscore to load templates like so:

    define([‘marionette’,’underscore’, ‘text!templates/book.htm’], function(Marionette, _, htmlTemplate) {

    template: _template( htmlTemplate);

    I also prefer ‘MUSTACHE’ style templates {{ }} as opposed to ERB style and tweak underscore to handle them with:

    _.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
    };

    I hadn’t seen the tpl! plugin, just thought I’d ask before google for it…

    BTW, I grew up in SoCal and have family living in San Diego, you’ve got it all right there! My brother lives in the Allied Gardens area near SDSU, he affectionately calls it the ‘AG’

    Thanks and Regards,

    –Ted

  3. Hello Jarrod,
    thank you very much for this example, I’m learning Marionette following your repo.
    The problem is that it is quite different from what Addy and Derick describe on Addy Osmani’s book “backbone foundamental”.
    I like your approach with the AMD and Require.js but I’m getting confused because I could not find a good description of your implementation. Maybe I’m asking too much but would you consider to write a short article based on Addy and Derick Marionette description of the ToDoMVC but focused on your implementation? I’m quite sure it will help some guys out there, especially the folks like me with no much Backbone experience.

    Also, what if I would use Mustache or IcanHaz.js as templating system?
    In the case of ICanHaz I guess I could solve with:

    Backbone.Marionette.Renderer.render = function(template, data){
    return ich.template(data);
    }

    but I’m quite sure I can’t use your tpl plugin because it is based on underscore templating.
    Is there a way to customize it or adapt it to other templating systems?

    Thank you very much for your contribution!

    1. You’d be able to pass in any template function, which mustache and (i presume) ICanHaz provides, just pass those in as the template.

      This implementation is pretty basic and differs a little bit from how Derick organizes his code. In my own apps I would probably write something in between this and Derick’s implementation, I just tried to keep this one as simple as possible.

  4. Hello Jarrod,
    Thanks for a nice Backbone.Marionette + RequireJS TodoMVC example!

    I tried to update javascript libraries to the latest version.
    jquery 1.11.0 (not 2.x because I need to support old IEs)
    Underscore.js 1.6.0
    Backbone.js 1.1.2
    Marionette.js 1.6.4
    r.js 2.0.6

    However I got the following error on Chrome 33.0.1750.149:
    Uncaught ReferenceError: Backbone is not defined at main.built.js:189

    The updated source is at
    https://github.com/hnakamur/todomvc/commit/ccc1af277991427e9ce2e9f911c79d8b2fcdc4a7

    I ran the following commands to update js/main.built.js
    chmod +x ./r.js
    ./r.js -o app.build.js

    Could you help me to fix the problem?
    Thanks

Leave a Reply