Skip to content

Instantly share code, notes, and snippets.

@pigeonflight
Last active Apr 25, 2020
Embed
What would you like to do?
Example of using requirejs with a jquery plugin and Plone

This is an example of using a jquery plugin (in this case semantic ui) via requirejs WITHOUT needing to rely on the plone bundling infrastructure.

Update: Dec 16, 2015

http://github.com/thet pointed out an alternative approach which reduces the number of files used by getting rid of main.js and putting all the code in app.js like this:

require.config({
    "baseUrl": "./",
    "paths": {
      "app":"++resource++jobdashboard.site",
      //"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "semantic":"++resource++jobdashboard.site/semantic/semantic.min"
    }
});


// Load the main app module to start the app
// require(["app/main"]);
require(["jquery","semantic"], function($) {
    //the semantic ui code is loaded up also.
    $(function() {
        $('.ui.rating').rating();
    });
});

This is most useful for developers working on the filesystem who have created their own package using something like mr.bob.

The example assumes a package named my.package and that everything is loaded from a special resource named: ++resource++my.package, (I assume you know how to set this up).

jquery is already provided by Plone so, even though it is a dependency for semantic ui it should just work. My static folder ("++resource++my.package") looks like this

|-- static
|   |-- app.js
|   |-- main.js
|   `-- semantic
|       |-- semantic.min.css
|       |-- semantic.min.js

app.js

This file is used to load dependencies and then on line 10 it loads the main.js (which is where everything happens)

main.js

I call the rating code from the main.js like this:

$('.ui.rating').rating();

dashboard.pt

Only needs to load the css and the app. To save some brain cells I put both the css and the js in the javascript_head_slot

require.config({
"baseUrl": "./",
"paths": {
"app":"++resource++jobdashboard.site",
"semantic":"++resource++jobdashboard.site/semantic/semantic.min"
}
});
// Load the main app module to start the app
require(["app/main"]);
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
metal:use-macro="context/main_template/macros/master">
<metal:block fill-slot="javascript_head_slot">
<link rel="stylesheet" type="text/css" href="++resource++my.package/semantic/semantic.min.css">
<script src="++resource++my.package/app.js">
</script>
</metal:block>
<metal:block fill-slot="content-core">
<metal:repeat tal:repeat="result view/properties">
<strong>${result/title}</strong> <div class="ui star rating" data-rating="3"></div>
<i class="circle icon" style="color:red"></i>
</metal:repeat>
</metal:block>
</html>
// I this for my actual js code
define(["jquery","semantic"], function($) {
//the semantic ui code is loaded up also.
$(function() {
$('.ui.rating').rating();
});
});
@thet

This comment has been minimized.

Copy link

@thet thet commented Dec 15, 2015

You could also get rid of main.js by putting the code from within the define call into the require call.

@thet

This comment has been minimized.

Copy link

@thet thet commented Dec 15, 2015

Nice gist, by the way!

@fulv

This comment has been minimized.

Copy link

@fulv fulv commented Dec 16, 2015

+1

@pigeonflight

This comment has been minimized.

Copy link
Owner Author

@pigeonflight pigeonflight commented Dec 16, 2015

@thet,
Thanks for the feedback, I've added a note to the gist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment