Very confused on how to get this working on browser with handlebars?

[DOTang]

I'm new to gulp and stuff so I feel like I am missing something easy. But I can't figure out how to get this working in browser. I am not using node or anything and just want to use the helpers in js on my pages. I've almost gotten there but still can't get it. On my page at bottom I've got:

var source = $("#questions-template").html();
            window.helpers = Handlebars.registerHelper(require(['/lib/handlebars-helpers/lib/helpers/helpers-math.js']));
            //console.log(helpers);
            var template = Handlebars.compile(source);
            var questionData = JSON.parse('{ "questions":data }');
            console.log(questionData);
            var html = template(questionData);
            $("#questions-template-output").html(html);

I've read the other questions and tried what was in there, but I had to include the [] around the require string otherwise it says :

Module name "/lib/handlebars-helpers/lib/helpers/helpers-math.js" has not been loaded yet for context: _. Use require([])

Now it''s telling me the same thing but for lodash, which is in helpers.math.js.

I'm very new to gulp, handlebars, and require. So I imagine I am missing something simple. It seems like I should be loading all these requires somewhere else somehow? I notice in gulp though I don't need the [] so not sure what's up.

Also why is the bower package for this at version 0.5.8, but the NPM is up to 0.9.8?

[doowb]

I am not using node or anything and just want to use the helpers in js on my pages.

handlebars-helpers was created to be used in node.js projects. This repository shows how you can use gulp and browserify to "bundle" up a new file that can be used in the browser. handlebars-helpers cannot be used directly in the browser without some type of transformation.

The require used in the source files is provided by node.js for loading modules. When browserify is used, it creates a new require function that is used in the browser.

Also why is the bower package for this at version 0.5.8, but the NPM is up to 0.9.8?

The bower.json file in handlebars-helpers says version 0.9.8. I'm not sure how bower updates the versions, but if something needs to be done, will you open an issue on handlebars-helpers?

I'm very new to gulp, handlebars, and require.

This repository is showing 3 things:

1. how to use node.js conventions (require and module.exports) to write code for the browser

   • src/app.js contains the code as if it was written for node.js

2. how to transform and bundle the node.js code into a single javascript file that can be used in the browser

   • gulpfile.js uses browserify to transform and bundle the code
   • the src/index.html file shows how the bundled file is used in the browser using the <script> tag:

     <script src="./app.js"></script>

3. how to use gulp and browserify to build your webapp.

   • bundle javascript code described above. This creates the _gh_pages/app.js file.
   • build the html from src to _gh_pages. This example isn't really doing any "building", but it's copying the src/index.html to _gh_pages/index.html.
   • other gulp tasks for serving the _gh_pages folder while doing development.

A lot of these steps assume some familiarity with node.js, gulp, and browserify, since the goal is to provide an example showing how those tools can be used to create the correct files necessary to use handlebars-helpers in the browser.

I hope this helps. I'll leave this issue open for now in case you try to use node.js, gulp, and browserify and need help getting that part working.

[DOTang]

Okay I went through all the motions, just to make sure I was doing things correctly. But I'm pretty sure all I did was generate the same js file that lives here: https://doowb.com/handlebars-helpers-browserify-example/app.js right? So If I reference that file in my browser .html file, then how do I use it in the above template so that I've loaded the appropriate helpers?

[doowb]

The app.js is what will be used instead of inline the javascript in the <script></script> tags in your html. So you can just do <script src='app.js'></script> instead.

If you update the src/app.js file to use your code above, then it should look like this:

var $ = require('jquery');
var helpers = require('handlebars-helpers');
helpers.math({handlebars: Handlebars});

$(function() {
  var source = $("#questions-template").html();
  var template = Handlebars.compile(source);
  var questionData = JSON.parse('{ "questions":data }');
  console.log(questionData);
  var html = template(questionData);
  $("#questions-template-output").html(html);
});

I'd have to try some other things to get handlebars-helpers to work as a completely standalone library that you can just load directly using <script src="path/to/handlebars-helpers.js"></script>.

I haven't used handlebars-helpers in the browser much outside of these conventions since when I use it, it's part of an app that's already being built by using a tool like browserify.

[DOTang]

Hmm so if I understand you right, I need to stick my code within the app.js file BEFORE it gets gulped? Not the https://doowb.com/handlebars-helpers-browserify-example/app.js file thats generated after gulping correct?

[doowb]

correct

[DOTang]

Oh hmm, I didn't realize that, well using gulp for every page isn't really practicable for us so I guess I can't use it. A standalone library would be awesome.

[doowb]

ok, closing since the standalone library is a different example and might be something that gets implemented in handlebars-helpers