2

我正在编写一个基于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 小部件的标记并将其重新添加到它返回的结果中？

4

1 回答 1

6

经过一些实验，我发现了，虽然解决方案不是 100% 完美的。

  • 要预加载数据，我可以使用data-valueHTML 中的属性，如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()
    });
});

这个小提琴显示了代码和一个工作示例。

于 2013-04-05T15:52:29.477 回答