与jQuery X-Editable库

Question

我一直试图将X-Editable http://vitalets.github.io/x-editable/与Select2 https://select2.github.io/一起使用数周，但没有太多运气。

最初我试图从AJAX请求中加载数据，然后使用该库，但我可以看到是否所有旧代码都适用于两个库的旧版本。

为了略微简化，我现在决定单独加载我的数据，以便X-Editable和Select2只需要处理已经可用的数据数组。

我现在的问题是修改数据的显示。

默认情况下，我很满意编辑字段的外观，看起来像是“标签”。

编辑完成后，在初始页面加载时，它会将我选择的项目显示为逗号分隔的字符串。我想修改那部分看起来不一样。

我看到了一些按照我的要求运行的示例，但它们似乎不适用于较新的版本。

这里的JSFiddle http://jsfiddle.net/jasondavis/j72k110m/显示了我想要的输出和功能......差不多但是这个演示是使用旧版本的Select2库。它有 Select2版本v3.4.4 和 X-Editable版本v1.5.1

Select2 的最新版本为版本v4.0.0 X-Editable是最新的v1.5.1，因为它有一段时间没有更新。

在初始加载时和选择新值后，它应如下所示，这意味着它将我们选择的值包装在span中：

点击以修改所选值时，它应该看起来像“标签”，但它不应显示<span>部分！

在这个JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/中 我已经将Select2更新为新版本，我试图通过将所选值显示为“标签”来复制上面其他JSFiddle的功能。

此版本的另一个问题是，在选择值时，它不会从下拉列表中删除选项。因此，即使已经选择了1个项目，它仍会显示为再次单击的选项！

另一个问题是新的选定项目不会在非编辑屏幕上添加。

下面有更多图片来展示我的意思......

下图显示初始屏幕加载所选项目以及所选项目而非编辑模式。问题是它没有使用所选的新项目进行更新。它还显示所选的ID而不是标题/名称

我的最终目标是在我的X-editable字段上使用Select2以允许选择已分配的用户。选定的指定用户将显示一个重力图像缩略图图像和用户名。

Select2和X-Editable都允许使用模板样式输出来修改输出，但是当它们一起工作时，默认功能不同，那些输出修改功能与运行任一库时的功能不同在它上面;自己。

我知道我想要做什么，因为2个库可以协同工作，只需要让较新版本的Select2与旧版本的X-Editable一起使用，而这个版本还没有长时间更新时间可悲！

Answer 1

我正在测试的最终jsfiddles位于https://jsfiddle.net/N6bQE/329/（引导程序可编辑）和https://jsfiddle.net/N6bQE/331/（可动态编辑）。

以下是我在尝试使用X-Editable使用Select2 4.0.0时所做的一些观察。

1. 您将data-value设置为apples, oranges, pie（请注意空格），技术上不正确。 id应该完全匹配，但是由于在旧版本的Select2中出现了一个不幸的错误 一个功能，完全忽略了额外的空格。

   删除空格解决了主要问题，即Select2未正确匹配选项（因此不显示它们）。

2. 您的source未包含您通过data-value传递的任何值，因此Select2无法显示它们。通过将某些id属性向上排列，Select2距显示弹出窗口时显示所选值的距离更近了一步。

3. 您正在使用X-Editable不允许的tags和source。该插件似乎优先tags优先于source，因此实际上没有任何内容传递到Select2，而您的source完全被忽略。

4. 但这并不重要，因为X-Editable首先没有正确显示值。您会注意到data-value显示为单个标记，而不是被拆分并显示为多个标记。为了让X-Editable与之合作，您需要在Select2选项中设置separator: ','。虽然Select2不再支持此选项，但X-Editable完全忽略viewseparator选项以支持此选项。

5. 为了在之后更新标签，您需要检查value方法中的display是否为数组。这是因为X-Editable只是将一个字符串传递回display方法，而不是人们期望的数组。