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> // add the object to the rules engine rulesEngine.addPropertyObject( { 'title' : "{%title%}", 'year' : "{%year%}", 'category' : "{%cat%}", 'tags' : "{%tags%}".split(','), 'selected' : function() { //debugger; $("#{%docid%}").show(); //show the document when rulesEngine considers it to match the rules }, 'notselected' : function(aRuleEngine) { //debugger; var reason = aRuleEngine.myRulesEngine.opts.reason; console.log(JSON.stringify(reason)); $("#{%docid%}").hide(); //hide the document when rulesEngine considers it not to match the rules } } ); </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();//process the rulesEngine once the documents are loaded }) }) </script> </section>