Привязка данных к html с помощью Jquery и nunjucks

Я пытаюсь загрузить данные в элемент. Я пытался регистрировать данные в конце 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>

javascript html jquery nunjucks
person Jhon Caylog    schedule 23.10.2019    source источник
comment
Проверьте вывод консоли :) Я полагаю, что template ( nunjucks.renderString(template, ...) не является строкой.   -  person Aikon Mogwai    schedule 23.10.2019
comment
я попытался зарегистрировать его, вывод "html"   -  person Jhon Caylog    schedule 24.10.2019
comment
Попробуйте var html = nunjucks.renderString('TEST {{x}}', {x: 'OK'}); $('#filterOptionWrapper').html(html);. Если вы видите TEST OK, значит nunjucks работает. В другом случае ваш nunjuck-шаблон замаскировал специальные символы, например. %, < и >. Итак, nunjucks не может использовать его по назначению.   -  person Aikon Mogwai    schedule 24.10.2019
comment
вывод @AikonMogwai - тест в порядке   -  person Jhon Caylog    schedule 25.10.2019
comment
что делать, если шаблон nunjcuk замаскировал специальные символы?   -  person Jhon Caylog    schedule 25.10.2019
comment
код, который у меня есть, работает с макетом, который я создал, но когда я интегрировал свой бэкэнд (бэкэнд-рендеринг), это больше не работает   -  person Jhon Caylog    schedule 25.10.2019
comment
Я пробовал много вещей, но все равно   -  person Jhon Caylog    schedule 25.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Предположим, что у вас есть следующий шаблон

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

Попробуйте вывести его в консоль перед переходом к renderString (используйте F12 для проверки консоли).
Есть две возможности: вы увидите исходный шаблон или как показано ниже

&lt;div id = &quot;items&quot;&gt;
  {% for item in items %}
  &lt;div&gt;{{item}}&lt;/div&gt;
  {% endfor %}
&lt;/div&gt;

Это означает, что escape был применен к шаблону. Чтобы отменить экранирование, используйте одно из решений здесь, например.

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

Я надеюсь, что это помогает.

person Aikon Mogwai    schedule 25.10.2019