Как сделать шаблон в jquery? используя нуньюки - PullRequest
Новая
       16

Как сделать шаблон в jquery? используя нуньюки

0 голосов
/ 25 октября 2019

Я просто не знаю, почему он рендерит данные, когда я тестирую, подает иск на приведенный ниже пример, что означает знать, что шаблоны nunjucks работают 

var html = nunjucks.renderString('TEST {{x}}', {x: 'OK'});
$('#filterOptionWrapper').html(html);

Но когда я это реализую, это больше не работаеткогда это действительно то же самое на примере выше 

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

Данные 

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

HTML 1 

<div id="filterOptionWrapper"></div>

HTML 2 

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