Search code examples
javascripthelperdust.js

How do I use helpers with Dust.js on a local environment?


I'm programming using dust-full.js from the linkedIn fork (2.5.1). I'm trying to use helpers for conditionals, but I can't seem to get it to work. Right now, I'm using my local machine (I have no intention at the moment to include a server backend, but it may be where this project goes). I currently test my code on my Dropbox public folder. All non-helper code has worked.

The code in question:

    {?quote temp="4"}
        Once you have chosen the best answer{@if cond="{temp} > 1"}s{/if}, please select the "Submit" button.
    {:else}
        Choose the best answer{@if cond="{temp} > 1"}s{/if}, then select the "Submit" button.
    {/quote}

I have previously added the dust-full.js distribution and helpers like so:

<script src="script/dust-full.js" type="text/javascript"></script>
<script src="script/dust-helpers.min.js" type="text/javascript"></script>

I saw in other threads and on the dust.js tutorial that one needed to "require" the helpers. Using code like this:

var dust = require('dustjs-linkedin');
dust.helper = require('dustjs-helpers');

However, when I include this, I get the console error: "ReferenceError: require is not defined." I assume that this is because "require" is usually used/included in node.js, but I honestly don't know. I would prefer not to include node.js, as I don't know it and I'm not interested in learning additional libraries. However, I do not know how to evaluate helpers.

I have four questions:

  1. Are there any obvious bugs in the code I've provided?
  2. Are dust.js helpers only available using when using server-side scripting?
  3. (Assuming the answer to 2 is "No") Can helpers be used only with dust-full.js and dust-helpers.js?
  4. (Assuming the answer to 3 is "No") How does one use helpers only using client-side scripting?

Solution

  • Using require to load the helpers is for a server environment like Node. You should be able to do exactly what you've done to load the helpers-- just include them after the main dust script and they'll be automatically added to the dust object.

    What you've done looks correct, so is it possible that you've used the wrong path to your dust-helpers Javascript file?

    Here is a snippet showing the {@gt} helper working. (The {@if} helper is deprecated, so you'll get warnings in the console when you use it-- but {@gt} does exactly what you want.)

    <div id="output"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
    <script>
      var tmpl = dust.compile('Hello World! Choose the best answer{@gt key=temp value=1}s{/gt}', "test"),
          context = { "temp": 4 };
      dust.loadSource(tmpl);
      dust.render("test", context, function(err, out) {
        document.getElementById("output").textContent = out;
      });
    </script>