Plugins, in RequireJS, are simply modules that adhere to a specific API. When you want to load a module using a plugin, you define the plugin as a prefix of the dependency. So for example, when using the Text plugin to load an HTML file, you might define the dependency as such:
Notice that a "!" character is being used to separate the plugin prefix from the dependency suffix. In the above definition, it is not necessarily clear that the "text" plugin is actually a module itself; but, consider that the above line could be rewritten with this kind of format:
In this format, it starts to become a bit more obvious that the Text plugin is a module that gets loaded by RequireJS as a type of implicit dependency.
To explore this feature, I wanted to take an array of data objects and merge them into the DOM using a remote template. In order to make use of the "Text" plugin, however, I had to download the Text.js file and put it in an accessible directory, relative to the RequireJS demo.
Notice that in this exploration, I am putting a define() function call right into the main file. While it is recommended that each module be placed in its own file, I thought I was seize this as an opportunity to explore explicitly named modules; since this define() usage, in this case, cannot map a file path to a module, we have to provide the module name - friends.data - as part of the define() invocation.
Once the friends data has been loaded, I use a require() call and the Text plugin to load in the HTML template. Here is the HTML file that is being loaded:
friend-template.htm (Our Remote HTML Template)
<!-- BEGIN: Friend Template. --> <li class="friend"> <span class="name">NAME</span> <span class="age">( Age: <span class="value">AGE</span> )</span> </li> <!-- END: Friend Template. -->
Once this dependency has been loaded, I can then merge the "friends.data" module with the template in order to update the DOM (Document Object Model). When we run the above code, we get a dynamically populated page:
As you can see, the Text plugin automatically loaded the remote HTML template and then passed the string value through to the given asynchronous callback. We were then able to use jQuery (which was loaded as part of the "require-jquery.js" library version) in order to convert the HTML string into a usable DOM fragments.
So far, everything I've tried with the RequireJS library just seems to work. I feel somewhat silly for having put it off for so long. I had assumed that it would be difficult to use; but, it's exactly the opposite. I'm really liking it.
Nice video, helped a lot. Why do we define modules when the function of Require JS is just to load things, not to manage things?
One question -- in your usage of jQuery to ensure the DOM is ready, there's no $(document).ready() wrapped around your function. Is the DOM's ready state already implied in some other way? I'm scratching my head over that part.
Love these RequireJS posts, by the way.
very informative. i was explicitly adding text.js in my project, and didn't realized what was behind text!. i think requirejs and textjs combined are great for templating, and i plan to use it with knockoutjs. thanks alot!
template *.html works in android but not in iOS, why?
I know that this post is pretty old, but was wondering if you think that inside a template one can add an img tag as well.
Say that the data received has a path attribute or something like that.
I ask of course, because I tried doing this using the setup you provided in this post :). Problem is that I get an error in the browser's console :"Resource interpreted as Image but transferred with MIME type text/html".
This technique allowed me to go beyond Amber's canvas and load templates too.