Skip to content

Instantly share code, notes, and snippets.

@pigeonflight pigeonflight/README.rst

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 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 commented Dec 15, 2015

Nice gist, by the way!

@fulv

This comment has been minimized.

Copy link

fulv commented Dec 16, 2015

+1

@pigeonflight

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.