Question

I’m just getting started with RequireJS and it appears I’m not expressing my dependencies correctly. I’m trying to map a fairly straightforward dependency chain:

KnockoutJS depends on jquery-tmpl depends on jquery

I’m trying not to use require-jquery. In my HTML, I do this:

<script data-main="scripts/main" src="scripts/require.js"></script>

My main.js:

require(
  {
    baseUrl: 'scripts',
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
        jquerytmpl: "require-jquery-tmpl",
        knockout: "require-knockout"
    }
  },
  ["myApp"],
  function() {
        $(function() {
            console.log('main: triggered');
        });
  }
);

My require-jquery-tmpl.js:

define([
  "order!jquery",
  "order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"], 
  function() {
    console.log("init tmpl");
  }
);

My require-knockout.js:

define([
  "order!jquerytmpl",
  "order!./scripts/knockout-1.2.1.js"], 
  function() {
        console.log("init ko");
  }
);

And finally, myApp.js:

define(["knockout"], function() {
    $(function() { ... }
}

What I’m seeing is that knockout-1.2.1.js is getting loaded and evaluated before jquery-tmpl.js. The console.logs show that init tmpl happens before init ko, so the RequireJS callbacks are firing in the right order. But, I added some debug logs in Knockout and I can see that it’s getting evaluated way before init tmpl happens.

As a result, when I try to ko.applyBindings(), it complains that jQuery templates can’t be found. The funny thing is that if I manually tell KO to register the default template engine in the callback, it works fine and everything’s perfect. But, I think that’s just masking the core issue.

Why isn’t RequireJS waiting until jquery-tmpl is loaded before evaluating Knockout?

Answer 1

I haven’t been able to diagnose the actual problem, but I got my dependencies working by using require instead of define in parts of the module definition. The configuration that works for me looks like this:

My main.js:

require(
  {
    baseUrl: 'scripts',
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min',
        jquerytmpl: "require-jquery-tmpl",
        knockout: "require-knockout"
    }
  },
  ["myApp"],
  function() {
        $(function() {
            console.log('main: triggered');
        });
  }
);

My require-jquery-tmpl.js:

define(["jquery"], function() {
    require(["order!http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"], function() {
        console.log("init tmpl");
    });
});

Notice I’m saying require jquery.tmpl.js with order instead of listing it in the define dependencies.

Same change to require-knockout.js:

define(["jquerytmpl"], function() {
    require(["order!knockout-1.2.1.js"], function() {
        console.log("init ko");
    });
});

This fixes my problem, but I still do not have an explanation for why the RequreJs order plugin doesn’t work correctly with my original definitions.