pigeonflight/README.rst

## README.rst

      
    Raw
  

              README.rst
            
          
    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

  
## app.js
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"]);

## dashboard.pt
<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>

## main.js
// I this for my actual js code
define(["jquery","semantic"], function($) {
    //the semantic ui code is loaded up also.
    $(function() {
        $('.ui.rating').rating();
    });
});
	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();
	});
	});