Example of the xblock in a course page pattern

Studio Page

<!--
    Studio Page
    Parameters: 
    data-location="block-v1:org+course+run+type@page+app+block@b7080beb3fa244d8b31442ace0bca8d3" 
    data-extra="An example"
-->
<div id="podium-js"
    data-location="block-v1:org+course+run+type@page+app+block@b7080beb3fa244d8b31442ace0bca8d3" 
    data-course-id="course-v1:org+course+run"
    data-extra="You can pass more variables here">
></div>
<script type="text/javascript" src="https://gist.githubusercontent.com/felipemontoya/2bc680f6380ec3632faf0400ebdca27e/raw/c0b9073c698a4db59a7e3839fc890814d57af46d/xblock-page-app-loader.js"></script>

template.html

<%
    var explanation = "This is a backbone template, use it wisely"
%>

<div id="page-app">
</div>

xblock-page-app-loader.js

define = define || RequireJS.define;

(function (require, define) {
  'use strict';

  require.config({
    baseUrl: "../",
    paths: {
      /* Load jquery from google cdn */
      'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min'],
      /* Load from cdn */
      'backbone': ['https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min'],
      'underscore': ['https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'],
      'text': ['https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min']
    },
    shim: {
      /* Set bootstrap dependencies (just jQuery) */
      'backbone' : ['underscore']
    }
  });

  require([
    'jquery',
    'underscore',
    'backbone',
    'text!/static/template/main.html',
    ], function ($, _, Backbone, template) {
  
    // All your code here
    var extras = $('#page-app').data('extras');

  });

}).call(this, require || RequireJS.require, define || RequireJS.define);