2

Мне нужно динамически создавать (на основе json) компоненты слайдера (хранятся в li).
Вот код который нужно вставить в ul:

<li class="slider__li">
    <div class="slider__block">
        <div class="slider__sale slider__sale-pos">-30%</div>
        <div class="slider__img"><img src="/images/b1.png" alt=""></div>
    </div>
</li>

Вот код jquery который работает с json:

$.getJSON('js/sliders.json', function (data) {
    for (var i = 0; i < data.slider1.length; i++) {

        var k = "Вот сюда нужно вставить HTML";
        $('.slider__ul').append(k);
    };
});

Но когда я вставляю код html в переменную, там происходит конфликт с "кавычками", и в итоге получается не строка, а черти что, и вставить туда элементы из json вообще невозможно.
Как решить эту проблему?

5
  • А что мешает заключить html строку не в двойные кавычки а в одинарные, то есть var k = 'HTML';? Commented 25 июл. 2016 в 10:49
  • @АлексейШиманский все так же. Дело в том, что и переход на следующую строку тоже вызывает проблему, я имел ввиду может есть кардинально другой способ. Commented 25 июл. 2016 в 10:58
  • Правильно. переход на другую строку надо конкатинировать... Commented 25 июл. 2016 в 11:01
  • @АлексейШиманский а если у меня будет 200 строк, тут хорошо хоть 5. Commented 25 июл. 2016 в 11:02
  • 1
    Ну нормальные IDE сами автоматом делают конкатенацию, когда пишешь на новой строке в js........ А если этим влом заниматься, то есть шаблонизаторы..... Или самому можно написать некий шаблон, в котором будет написана строка, а потом функция replace заменит все что нужно в одной строке на то, что в шаблоне прописано......... Commented 25 июл. 2016 в 11:06

4 ответа 4

3

Воспользуйтесь jQuery Templates или подобным плагином.

Оберните ваш HTML элементом <script>, добавьте id.

<script id="template" type="text/jquery-tmpl">
    <li class="slider__li">
        <div class="slider__block">
            <div class="slider__sale slider__sale-pos">-30%</div>
            <div class="slider__img"><img src="/images/b1.png" alt=""></div>
        </div>
    </li>
</script>

В обработчике добавьте вызов шаблонизатора.

$.getJSON('js/sliders.json', function (data) {
    for (var i = 0; i < data.slider1.length; i++) {

        var k = $('#template').tmpl(data.slider1[i]);
        $('.slider__ul').append(k);
    };
});
1
  • Отличное решение, сразу несколько проблем покрыло, спасибо! Commented 26 июл. 2016 в 6:53
3

Можно воспользоваться стандартом ES-2015. Нужно в начале кода добавить 'use strict'; и заменить "" на ``. Вариант хорош тем что не требует каких либо дополнительных библиотек.

let multiline = `Это
    многострочный
    текст`;

В вашем случае так:

'use strict'; // Обязательно в начале документа

$.getJSON('js/sliders.json', function (data) {
    for (var i = 0; i < data.slider1.length; i++) {
        var k = `
          <li class="slider__li">
            <div class="slider__block">
              <div class="slider__sale slider__sale-pos">-30%</div>
              <div class="slider__img"><img src="/images/b1.png" alt=""></div>
            </div>
          </li>`;
        $('.slider__ul').append(k);
    };
});

Более подробно (Строки в ES-2015)

2
  • Спасибо за совет, но к сожалению у меня не сработал такой вариант. Commented 26 июл. 2016 в 6:54
  • Какой браузер используете?
    – Brik Vadim
    Commented 26 июл. 2016 в 7:41
2

По сути, надо в любом редакторе в начало html строк вставить ', а в конец ' + :

$.getJSON('js/sliders.json', function (data) {
    for (var i = 0; i < data.slider1.length; i++) {

        var k = (
            ' <p> ' +
            '   <span>...</span> ' +
            ' </p> '
        );

        $('.slider__ul').append(k);
    };
});
2

попробуйте вот такой решение с multiline кодом в JS https://github.com/sindresorhus/multiline

Usage

Everything after the first newline and before the last will be returned   as seen below:

const str = multiline(function(){/*
<!doctype html>
<html>
<body>
    <h1>❤ unicorns</h1>
</body>
</html>
*/});
3
  • Что то я с ним не разобрался, сделал все как в инструкции. Какой js файл нужно подключать? их там 5-6 штук и все названы не однозначно. Commented 25 июл. 2016 в 12:34
  • <script src='browser.js'></script><script src='index.js'></script>
    – Max T
    Commented 25 июл. 2016 в 12:56
  • ага, 2 файла, спасибо! Commented 26 июл. 2016 в 6:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.