Requiring and using jsrender/jsviews with require.js

[andream16]

I inherited a big javascript project made with javascript vanilla, jquery and jsviews/jsrender. Since it is made by few files of over 4000 lines of code each and I'm used to work with AngularJS, I'm trying to modularize it using requirejs.

I'm having a weird problem on jsrender/jsviews initialization

Uncaught TypeError: Cannot read property 'allowCode' of undefined

In global.js, given by

define(['jquery', 'jsrender'], function($, jsrender){

  jsrender.settings.allowCode(true);

});

Before trying to set up require, it used to work and be initialized like

$.views.allowCode(true);

where $.views was an object with settings attribute.

I also tried

$.jsrender.settings.allowCode(true);

but I get the same error.

If I do console.log(jsrender); I get function (a,b){return new n.fn.init(a,b)}

This is my index.html

<script data-main="js/common" src="js/vendors/requirejs/require.js"></script>
<script>
  require(['common'], function () {
     require(['global'])
  });
</script>

And this is common.js

requirejs.config({
    baseUrl : "js",
    paths : {
        jquery   : "vendors/...",
        jsrender : "vendors/..."
    }
});

Even tho I haven't any configuration problems, this is project's structure

|
|-- index.html
|-- js
|     -- vendors
|                -- jquery
|                -- jsrender
|     -- global.js
|     -- common.js

What causes this issue? How can I fix this?

Thanks in advance.

[BorisMoore]

The two parameters: jsrender and $ are in fact both the jQuery object. (Your console.log is showing it in minified form).

So you can simply write:

define(['jquery', 'jsrender'], function($){
  $.views.settings.allowCode(true);
  ...
});

The effect of requiring 'jsrender' as a dependency is that JsRender is loaded as a jQuery plugin, so the $ object includes the corresponding methods and objects, such as $.views and $.render.

BTW, there are some examples here, but using require, rather than defining new modules: https://github.com/BorisMoore/jsrender/blob/master/test/unit-tests/tests-jsrender-amd-scriptloader.js

I see you posted to stackoverflow. I'll wait for your response here before copying this response over to there...

[andream16]

Hi Boris, thank you for your reply. When I'll be back at work I'll try and let you know. Have a good weekend.

[andream16]

Hi Boris, I tried what you said $.views.settings.allowCode(true); but I still get Cannot read property 'settings' of undefined. I think this is cause by the fact that the developer who gave me the project imported scripts with defer attribute Githubissues.

Githubissues is a development platform for aggregating issues.