Frontend need for Handlebars.compile. but handleba

问题:

I am developing a bigcommerce stencil theme. I want to use basic handlebars functionality like

markup

    <div id="mobile"></div>
    <script id="mobile_category_template" type="text/x-handlebars-template">
      <div class="entry">
        <h1>{{var}}</h1>
        <div class="body">
          <p>body</p>
        </div>
      </div>
    </script>
    <script src="{{cdn 'https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js'}}"></script>
    <script src="{{cdn '/assets/js/category.js'}}"></script>

javascript

    var hitTemplate = Handlebars.compile($("#mobile_category_template").html());
    $(".collection-page").html(hitTemplate({
      var: "var works"
    }));

This would normally work. but bigcommerce parses handlebars serverside. By the time my frontend handlebars parse, the {{var}} has already been compiled. How can i get the above to work separately from serverside handlebars? OR how do i make and/or extend the current handlebars logic. (basically how can define my own template variables/drops)

Very specifically. I want to decide rather to load {{> components/mobile}} or {{> components/desktop}} based on the viewport or browser in use (easily done with javascript).

This is the problem i want to solve: BigCommerce Stencil — load component parts based on custom javascript logic