A simple demo to explicit the concepts of
  • "Configurator" : the selector that can filter on the document's year, tags or category
  • "Objects" to select that are the Documents to display
  • "Rules" according to the configurator and the object configurations...
We use the Blapy library to load the documents from a JSON file in ajax mode.
Obviously, this demo could have been done in a simpler way without JamRules!
<section class="documents" data-year="{{dateYear}}"> <div class="titleblock bg-salmon"> <div class="container"> <div class="row"> <div class="col col-12 offset-1"> <h2 class="h1">{{dateYear}}</h2> </div> </div> </div> </div> <ul id="sectionDate" data-blapy-container="true" data-blapy-container-name="sectionDocument{{dateYear}}" data-blapy-container-content="sectionDocument{{dateYear}}" data-blapy-update="json" data-blapy-template-mustache-delimiterStart="{%" data-blapy-template-mustache-delimiterEnd="%}" > <|xmp style="display:none;"> <li id="{%docid%}"> <div class="container"> <div class="row info"> <div class="col col-2 offset-1 date"> {%date%} </div> <div class="col col-4 text-sm-right"> {%cat%} ({%tags%}) </div> </div> <div class="row sm-vertical"> <div class="col col-10 col-sm-14 offset-1"> <h3>{%title%}</h3> </div> <div class="col col-2 col-sm-14 text-right text-sm-left"> <a href="" class="download">Download</a> </div> </div> </div> </li> <script> rulesEngine.addObject({ 'propertiesSet' : { 'year' : { "{%year%}" : 1, "all" : 1 }, 'category' : { "{%cat%}" : 1, "all" : 1 }, 'tags' : "{%tags%},all".split(',').reduce(function(obj,atag) {obj[atag]=1;return obj;},{}), }, 'matched' : function() { //debugger; $("#{%docid%}").show(); }, 'notmatched' : function(aRuleEngine) { //debugger; var reason = aRuleEngine.myRulesEngine.opts.reason; console.log(JSON.stringify(reason)); $("#{%docid%}").hide(); } }); </script> </|xmp> </ul> <script> $("#myBlapy").trigger('updateBlock',{ html:[{{#documents}}{{{stringify}}}{{/documents}}], params:{embeddingBlockId:'sectionDocument{{dateYear}}'} }); $("#myBlapy").on('Blapy_afterPageChange', function(){ $.doTimeout('runJamrules',200,function(){ rulesEngine.runRulesEngine(); }) }) </script> </section>