StealJS and CanJS

Question

I'm having problems using canJS together with stealjs, i've cloned the repo of javascriptmvc (3.3 use canJS). Now i've this folder structure

/js
   /can
   /documentjs
   /funcunit
   /plugins
   .
   .
   .

In another part of my application i've a "standalone module" e.g layout (generated using the scaffolding tool). I load this module using "js/steal/steal.js?path/to/module/layout" inside my page and it works. If I stole some jquery plugins (e.g. located in the main js folder) inside my layout.js like so:

steal('plugins/jqueryplugin.js', 'plugins/jqueryplugin.css', function() {
    // my code here
});

it still work, but when i try to add in the list of "dependecies" some component from "canJS" (even fixture.js generated with the tool...because it stoles can.fixture) it just stops to work and breaks everything. I've also tried using:

steal('that').then('this', function() {});

But i've the same results.....fail!!! anyone have any hints?

Answer 1

Ok i found the problem. There is nothing wrong with stealjs and canjs, but

canjs just load its own version of jquery

that will break my application. Now I need to find a way to load canjs and jquery separately (i use yii and some extensions need to have jquery loaded at a certain time so cannot wait for canjs).

Answer 2

Is the issue the version of jQuery or the order of dependencies?

You can configure steal via the stealconfig.js to use another version of jQuery and manage any dependencies.

An example can be found in the github repo: (this example does not show dependencies so i added one below) https://github.com/bitovi/steal/blob/master/stealconfig.js

steal.config({
  map: {
    "*": {
    "jquery/jquery.js": "jquery", // Map to path
    "bootstrap/bootstrap.js": "bootstrap",
    "can/util/util.js": "can/util/jquery/jquery.js"
    }
  },
  paths: {
    "jquery": "can/lib/jquery.1.8.3.js", // Path to jQuery
    "bootstrap": "lib/bootstrap.js"
    "yui/yui.js" : "can/lib/yui-3.7.3.js",
  },
  shim : {
    jquery: {
      exports: "jQuery"
    },
  bootstrap: { // A dependency example
    'deps': ['jquery']
    }
  },
  ext: {
    js: "js",
    css: "css",
    less: "steal/less/less.js",
    coffee: "steal/coffee/coffee.js",
    ejs: "can/view/ejs/ejs.js",
    mustache: "can/view/mustache/mustache.js"
   }
});

Note: this is an untested example, hope this helps.

Answer 3

i had problem too with stealJs i have known that it work well with JavascriptMVC,
now i'm using AMD requireJs to dependency manage, an it works great with canjs. here is the documentation http://canjs.com/guides/using-require.html, i hope that it help you!