Dust.js Двусторонняя привязка данных

Question

У меня есть выпадающий список, который довольно прост.

<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>

Мне нужно изменить пользовательский интерфейс всякий раз, когда пользователь меняет выбор в раскрывающемся списке. Мне придется добавить еще <p> с описанием этого конкретного автомобиля.

В настоящее время я делаю это с помощью jQuery, но хотелось бы знать, есть ли какие-то встроенные способы сделать это в Dust.js изменив context или любым другим способом.

Answer 1

Вы все еще можете добиться того же, используя шаблоны пыли

<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>

Вот полный пример суть