Привязка данных к html с использованием Jquery и nunjucks - PullRequest
Новая
       25

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

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

Я пытаюсь загрузить данные в элемент, который я пытался записать в журнал на конце javascript, и он существует, но я не могу понять, почему он не отображается в html. Я уже импортировал нуньюки. Любая идея?

импортированные nunjucks 

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

1 Ответ

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

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

<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(); 
}

Надеюсь, это поможет.

...