example.js

ModuleView.extend({
  "@context": {
     "heroNS": "http://services.gannettdigital.com/vocabs/hero-module#",
     "xhtml": "http://www.w3.org/1999/xhtml/vocab#",
     "assetNS": "http://services.gannettdigital.com/vocabs/assets#"
     "HeroModule": "heroNS:HeroModule",
     
     // linked modules
     "assets": "assetNS:assetModule" 
     "nextButton": "xhtml:next",
     "prevButton": "xhtml:prev"
  }
  "@type": "HeroModule",
  "initialize": function() {
    var self = this;
    // sort our assets collection
    this.assets.sort(ui.sortByCallback); // This looks at the ui:sortBy proporty of each item and sorts them.
    
    // click handling is paraphrased...
    this.nextButton.onClick = this.onNext
    this.prevButton.onClick = this.onPrev
  },
  "onNext": function() {
    // Do onNext action
  },
  "onPrev": function() {
    // Do onPrev action
  }
})

example.template-render.html

<div prefix="
             hero: http://services.gannettdigital.com/vocabs/hero-module#
             asset: http://services.gannettdigital.com/vocabs/assets#
             layout: http://services.gannettdigital.com/vocabs/layout#
             ui: http://services.gannettdigital.com/vocabs/ui#
             xhtml: http://www.w3.org/1999/xhtml/vocab#
             xsd: http://www.w3.org/2001/XMLSchema#
             schema: http://schema.org/
            "
     typeof="hero:HeroModule">

   <!-- this generates a unique uri for these modules %}
   {% anonymous-uri nextButtonId %} <-- lets say nextButtonId is #EF324BAFOXS -->
   {% anonymous-uri previousButtonId %} <-- lets say previousButtonId is #ABFJ435 -->

 
   <!-- link the nested modules to the HeroModule for easy access in JS -->
   <link rel="asset:assetModule" href="http://services.gannettdigital.com/module/12/assets/214" />
   <link rel="asset:assetModule" href="http://services.gannettdigital.com/module/12/assets/5674" />
   <link rel="asset:assetModule" href="http://services.gannettdigital.com/module/12/assets/4456" />
   <link rel="xhtml:next" href="#EF324BAFOXS" />
   <link rel="xhtml:prev" href="#ABFJ435" />


   <div typeof="layout:VerticalContainer">

       <!-- the resource attribute lets us link these assets to the HeroModule instance for JS to use -->
       <div typeof="layout:HorizontalContainer">
       <div typeof="asset:AssetModule" resource="http://services.gannettdigital.com/module/12/assets/214">
          <meta property="ui:sortBy" content="1" datatype="xsd:integer" />
          <div property="schema:name">Asset 1</div>
       </div>


       <div typeof="asset:AssetModule" resource="http://services.gannettdigital.com/module/12/assets/5674">
          <meta property="ui:sortBy" content="2"  datatype="xsd:integer" />
          <div property="schema:name">Asset 2</div>
       </div>


       <div typeof="asset:AssetModule" resource="http://services.gannettdigital.com/module/12/assets/4456">
          <meta property="ui:sortBy" content="3"  datatype="xsd:integer" />
          <div property="schema:name">Asset 3</div>
       </div>


       <div typeof="layout:HorizontalContainer">
           <div resource="#ABFJ435" typeof="ui:PreviousArrow"><span property="rdfs:label">Previous</span></div>
           <div resource="#EF324BAFOXS" typeof="ui:NextArrow"><span property="rdfs:label">Next</span></div>
       </div>
       </div>

   </div>
</div>

example.template.html

<div prefix="
             hero: http://services.gannettdigital.com/vocabs/hero-module#
             asset: http://services.gannettdigital.com/vocabs/assets#
             layout: http://services.gannettdigital.com/vocabs/layout#
             ui: http://services.gannettdigital.com/vocabs/ui#
             xhtml: http://www.w3.org/1999/xhtml/vocab#
             xsd: http://www.w3.org/2001/XMLSchema#
             schema: http://schema.org/
            "
     typeof="hero:HeroModule">

   <!-- link the nested modules to the HeroModule for easy access in JS -->
   {% for moduleAsset in module.assets %}
       <link rel="asset:assetModule" href="{{ moduleAsset.uri }}" />
   {% endfor %}
   
   {% anonymous-uri nextButtonId %}
   {% anonymous-uri previousButtonId %}
   <link rel="xhtml:next" href="{{ nextButtonId }}" />
   <link rel="xhtml:prev" href="{{ previousButtonId }}" />


   <div typeof="layout:VerticalContainer">

       <!-- the resource attribute lets us link these assets to the HeroModule instance for JS to use -->
      <div typeof="layout:HorizontalContainer">
      {% for asset in module.assets %}
          {% include "asset/AssetModule.html" with module=asset %}
      {% endfor %}
      </div>
      
      <div typeof="layout:HorizontalContainer">
            {% include "ui/PreviousArrow.html" with resource=previousButtonId %}
            {% include "ui/NextArrow.html" with resource=nextButtonId %}
      </div>


   </div>
</div>

example.ttl

@prefix asset: <http://services.gannettdigital.com/vocabs/assets#> .
@prefix hero: <http://services.gannettdigital.com/vocabs/hero-module#> .
@prefix layout: <http://services.gannettdigital.com/vocabs/layout#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix schema: <http://schema.org/> .
@prefix ui: <http://services.gannettdigital.com/vocabs/ui#> .
@prefix xhtml: <http://www.w3.org/1999/xhtml/vocab#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .

<http://services.gannettdigital.com/module/12/assets/214> a asset:AssetModule;
    schema:name "Asset 1";
    ui:sortBy 1 .

<http://services.gannettdigital.com/module/12/assets/4456> a asset:AssetModule;
    schema:name "Asset 3";
    ui:sortBy 3 .

<http://services.gannettdigital.com/module/12/assets/5674> a asset:AssetModule;
    schema:name "Asset 2";
    ui:sortBy 2 .

<#ABFJ435> a ui:PreviousArrow .

<#EF324BAFOXS> a ui:NextArrow .

[] a layout:HorizontalContainer;
    rdfs:label <#ABFJ435>,
        <#EF324BAFOXS> .

[] a layout:HorizontalContainer .

[] a hero:HeroModule;
    asset:assetModule <http://services.gannettdigital.com/module/12/assets/214>,
        <http://services.gannettdigital.com/module/12/assets/4456>,
        <http://services.gannettdigital.com/module/12/assets/5674>;
    xhtml:next <#EF324BAFOXS>;
    xhtml:prev <#ABFJ435> .

[] a layout:VerticalContainer .