Как форматировать теги с помощью select2 и x-editable

Я пишу приложение на основе Django и Bootstrap, который отображает медиафайлы в виде миниатюр вместе с описанием и тегами. Я бы хотел, чтобы эти теги были оформлены как обычные ярлыки Bootstrap и были доступны для кликов.

Я использую X-editable для индивидуального редактирования описания и тегов (через Select2) и отправить их обратно на сервер. Это работает хорошо, за исключением тегов. Я не могу:

  1. Заполнить контейнер тегами с разметкой
  2. Получите чистые теги (без разметки), которые будут извлечены виджетом x-editable
  3. После внесения изменений в виджет x-editable верните чистые теги и отправьте их на сервер.
  4. Добавьте разметку к возвращенным тегам из виджета и заново заполните контейнер тегами с разметкой.

Шаг 3 (отправка чистых данных на сервер) - это то, что я, вероятно, могу понять или может стать предметом другого вопроса.

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

HTML: настройка X-редактируемых тегов и стиль тегов

<div class="controls controls-row">                        
    <span class="tags" id="tags-editable-1" data-toggle="manual" data-type="select2" data-pk="1" data-original-title="Enter tags">
        <a href="#"><span class="label">apples</span></a>
        <a href="#"><span class="label">oranges</span></a>
        <a href="#"><span class="label">pie</span></a>
    </span>
    <a href="#" id="tags-edit-1" data-editable="tags-editable-1" class=""><i class="icon-pencil"></i></a>
</div>

Javascript: настроить X-editable и Select2

$('.tags').editable({
    placement: 'right',
    select2: {
        tags: ['cake', 'cookies'],
        tokenSeparators: [",", " "]
    },
});

$('[id^="tags-edit-"]').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#' + $(this).data('editable') ).editable('toggle');
});

Таким образом, фактический вопрос касается шагов 2 и 4: как я могу удалить разметку, отправленную в x-editable виджет, и повторно добавить ее к результатам, которые он возвращает?


javascript jquery twitter-bootstrap jquery-select2
person David Planella    schedule 04.04.2013    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Я узнал после некоторых экспериментов, хотя решение не на 100% идеально.

  • Чтобы предварительно загрузить данные, я могу использовать атрибут data-value в HTML, например data-value="apples, oranges, pie".
  • Чтобы отобразить данные в нужном мне формате, я указываю функцию для отображать опцию в X-editable. Вот соответствующий бит.

.

display: function(value) {
    $.each(value,function(i){
       // value[i] needs to have its HTML stripped, as every time it's read, it contains
       // the HTML markup. If we don't strip it first, markup will recursively be added
       // every time we open the edit widget and submit new values.
       value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
    });
    $(this).html(value.join(" "));
  • Чтобы загрузить чистые данные в виджет редактирования, я использую обратный вызов shown.

.

$('.tags').on('shown', function() {
    var editable = $(this).data('editable');
    value = editable.value
    $.each(value,function(i){
       value[i] = $('<p>' + value[i] + '</p>').text()
    });
});

Эта скрипта показывает код и рабочий пример.

person David Planella    schedule 05.04.2013
comment
Потрясающий пример. Сообщество будет очень радо, если кто-то сможет заставить это работать так же, как ваш пример, но с более новыми версиями Select2 v4 и X-Editable. - person JasonDavis; 16.05.2015