Search code examples
javascriptjqueryparametersdust.js

dust js dynamic @eq condition


This seems simple, but I just can't figure how to dynamically change the @eq condition. The example shows a default render, i.e., curly, but what I need to do is accept user input, e.g., click a button, and change it to larry or moe.

See my jsfiddle http://jsfiddle.net/bodyrock/a7nmurnr/4/

From what I've read it appears I have to use one of the following techniques: - base.push onto context - makebase - partials - inline parameter - variable lookup

<script type="javascript">
$(document).ready(function () {
var data = {
    "title": "Famous People", 
    "names" : [{ "name": "Larry", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}] },{ "name": "Curly", "props":[{"name":"height","value":"5.9"},{"name":"weight","value":"200"}]},{ "name": "Moe", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}]}]
}

var source   = $("#entry-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);

dust.render("intro", data, function(err, out) {
    $("#output").html(out);
});
});
</script>

<script id="entry-template">
{title}
<ul>
{#names}
    {@eq key=name value="Curly"}
    <li>      
      {name}
      <ul><li>Weight: {#props}{@eq key=name value="weight"}{value}{/eq} {/props}</li></ul>      
    </li>
    {/eq}
{/names}
</ul>
</script>
<input type="button" value="moe" onclick="alert('change to moe');"><input type="button" value="larry" onclick="alert('change to larry');"><input type="button" value="curly" onclick="alert('change to curly');">
<div id="output"></div>

Solution

  • You just need to rerender the template with a new context that contains information about what person you want to show.

    JSFiddle

    $('input').on('click', function() {
        var ctx = dust.makeBase({ currentName: $(this).val() }).push(data);
        dust.render("intro", ctx, function(err, out) {
            $("#output").html(out);
        });
    }).first().click();
    

    and

    {#names}
        {@eq key=name value=currentName}
        <li>      
          {name}
          <ul><li>Weight: {#props}{@eq key=name value="weight"}{value}{/eq}{/props}</li></ul>      
        </li>
        {/eq}
    {/names}