Dust.js Two way data binding

Question

I have a dropdown which is pretty simple.

<div>
    <select id="optionDropDown">
        <option value="volvo">{@pre type="content" key="dropdown.option1"/}</option>
        <option value="saab">{@pre type="content" key="dropdown.option2"/}</option>
        <option value="mercedes">{@pre type="content" key="dropdown.option3"/}</option>
        <option value="audi">{@pre type="content" key="dropdown.option4"/}</option>
    </select>
</div>

I need to modify the UI whenever the user changes the selection in the dropdown. I will have to add a another <p> with the description of that particular car.

At present I am doing this using jQuery, but would love to know if there are some inbuilt ways to do this in Dust.js by modifying the context or any other way.

Answer 1

You can still achieve the same using dust templates

<script type="text/dust" id="tpl">
  <p>Chose: {type}!</p>
</script>
<script type="text/javascript">

  var tpl_src = $('#tpl').html();

  // Compile the template under the name 'tpl'
  var tpl_compiled = dust.compile(tpl_src, 'tpl');

  // Register the template with Dust
  dust.loadSource(tpl_compiled);

  // Whenever a choice is made...
  $('select[id=types]').on('change', function() {

    // Using jQuery ----------------------
    // $('div#selections').append('<p>'+$(this).val()+'</p>');

    // Using dustjs ----------------------

    // Render the template
    dust.render('tpl', { type: $(this).val() }, function(err, out) {

      if(err) {
        console.log(err);
        return;
      }

      // `out` contains the rendered output.
      $('div#selections').append(out);
    });

  });

</script>

Here is the full example gist