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>

每当用户更改下拉列表中的选择时，我都需要修改UI。我将不得不再添加一个<p>并带有对该特定汽车的描述。

目前，我正在使用jQuery进行此操作，但很想知道在Dust.js中是否存在通过修改context或其他任何方式的内置方法。

Answer 1

您仍然可以使用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>

这是完整示例gist

Dust.js两种方式的数据绑定

1 个答案: