JsRender noConflict()

Question

I have found two threads related to the above topic:

• https://github.com/BorisMoore/jsrender/issues/74
• https://github.com/BorisMoore/jsrender/issues/26

However, the following snippet

  <script src="js/jsrender.js"></script>
  <script type="text/javascript">
    var myJsRender = $.noConflict();
  </script>

results in:

ReferenceError: $ is not defined

What I am trying to achieve here is to run JsRender regardless of whether

• jQuery and/or
• another instance of JsRender

is loaded on the very same page. Why: Chances are that another plug-in loads JsRender as well.

What am I missing here?

Answer 1

At the time of those issues, JsRender created a global window.$ if jQuery was not loaded, but gave you a $.noConflict() method that told JsRender not to to override window.$, in case another library was using it.

But JsRender behavior has been modified since then so that it does not redefine $ at all. Instead, if jQuery is loaded it adds methods to $, such as $.render, $.templates, $.views.converters... and if jQuery is NOT loaded, it creates a window.jsviews global, and uses that instead of $ - so you have jsviews.render, jsviews.templates, jsviews.views.converters etc.

So for example, if you want to call the render method without knowing whether jQuery is loaded or not, you can write:

var $ = window.jsviews || window.jQuery;
// or window.$ = window.jsviews || window.jQuery;

$.templates(...);
$.views.converters(...);
$.render(...);

or if you don't want to use $ - in case some library other than jQuery is using it, you can write:

var jsviews = window.jsviews || window.jQuery;
// or window.jsviews = window.jsviews || window.jQuery

jsviews.templates(...);
jsviews.views.converters(...);
jsviews.render(...);

I'll update those issues to include this information...