[使用Jquery和nunjucks将数据绑定到html

Question

我正在尝试将数据加载到我尝试在javascript端记录数据的元素上，它确实存在，但我似乎无法弄清楚为什么它没有出现在html上。我已经进口了尼姑。有什么主意吗？

进口的尼姑

 <script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.1/nunjucks.min.js"></script>

Jquery

$(document).ready(function(){
    var filterOptions ={
        year: [{value: '2019', checked: false, count: 10},{value: '2018', checked: false, count: 99},{value: '2017', checked: true, count: 10}],
        model: [{value: 'Eco Sports', checked: false, count: 8},{value: 'Edge', checked: true, count: 4},{value: 'Escape', checked: false, count: 10}],
        priceRange: [{value: '$10,000-$20,000', checked: false, count: 5},{value: '$20,000-$30,000', checked: false, count: 22},{value: '$30,000-$40,000', checked: false, count: 10}],
        mileage: [{value: '1-1000', checked: true, count: 10},{value: '1001-2000', checked: false, count: 64},{value: '2001-3000', checked: false, count: 10}],
        bodyStyle: [{value: '2dr Car', checked: false, count: 13},{value: '4dr Car', checked: false, count: 9},{value: 'Convertible', checked: true, count: 2}]
    }



    var template = $('#filterOptionsTemplate').html();
    var html = nunjucks.renderString(template, {filterOptions: filterOptions});
    $('#filterOptionWrapper').html(html);

html

  <script id="filterOptionsTemplate" type="text/nunjucks">
      <ul class="nav nav-pills">
      {% for opt, item in filterOptions %}
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
            aria-expanded="false">{{opt}}</a>
          <div class="dropdown-menu">
          {% for i in item %}
            <a href="#">
              <div class="inner">
                <div class="checkbox">
                  <label class="filter-label-item">
                    <input type="checkbox" data-prop="{{opt}}" value="{{i.value}}" {% if i.checked %} checked {% endif %}/>
                    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                    <span>{{i.value}} <span class="badge badge-dark">{{i.count}}</span></span>
                  </label>
                </div>
              </div>
            </a>
          {% endfor %}
          </div>
        </li>
        {% endfor %}
      </ul>
    </script> 

Answer 1

假设您有下一个模板

<div id = "items">
  {% for item in items %}
  <div>{{item}}</div>
  {% endfor %}
</div>

在传递给renderString之前尝试将其输出到控制台（使用F12检查控制台）。有两种可能：您将看到原始模板或类似下面的内容

<div id = "items">
  {% for item in items %}
  <div>{{item}}</div>
  {% endfor %}
</div>

这意味着转义已应用于模板。要取消转义，请使用here中的一种解决方案，例如

function htmlDecode(value){ 
  return $('<div/>').html(value).text(); 
}

希望对您有帮助。