X-editable 就地编辑插件如何存储值？

Question

我试图了解 X-editable 如何存储值。

1. 例如我有以下代码：

   HTML：

   <a class="editable" data-type="select" data-value="1">value-1</a>
   

   JavaScript：

   $.fn.editable.defaults.mode = 'inline';
   
   $('.editable').html('value-2');
   $('.editable').data('value',2);
   
   $('.editable').editable({
       source: function () {
           return [
               { value: 1, text: "value-1" },
               { value: 2, text: "value-2" },
               { value: 3, text: "value-3" }
           ];
       }
   });
   

   这里是jsfiddle to play with

   如您所见，它工作得很好。第一步，我声明下拉列表的值等于“value-1”，然后在 JavaScript 中将其更改为“value-2”。结果你可以在页面上的“value-2”和“value-2”点击下拉后选择相同的值。

2. 在这一步，我将稍微修改一下 JavaScript，如下所示：

   //$('.editable').html('value-2');
   $('.editable').data('value',2); 
   

   结果再次令人期待。您会在页面上看到“value-1”，但打开下拉菜单时会选择“value-2”。

3. 现在让我们以相反的方式更改 JavaScript 代码

   $('.editable').html('value-2');
   //$('.editable').data('value',2); 
   

   经过这样的修改，页面上的值将等于“value-2”，但开始编辑时下拉列表中选择的值将是“value-1”。所以也是相当合乎逻辑的行为。

问题：

我没想到的是，通过单击可编辑控件的“确定”按钮保存更改不会更改 data-value 属性，它只会更改显示的文本。例如，如果我们将值更新为"value-3" 并单击“确定”，data-value 属性仍将等于 1。那么插件再次打开后如何在下拉列表中选择正确的值？

UPD：

从代码中改变editable值最合适的方法是使用

$('.editable').editable('setValue', 'value-1');

Answer 1

HTML 的 data-* 属性和 jQuery 的 data() 方法不是一回事。 jQuery 记录了它如何通过 data() 方法页面的 HTML5 data-* Attributes 子部分中的 data() 方法处理 HTML data-* 属性：

从 jQuery 1.4.3 开始，HTML 5 data- 属性将自动拉入 jQuery 的数据对象中。

data- 属性在第一次访问数据属性时被拉取，然后不再被访问或改变（所有数据值随后都存储在 jQuery 内部）。

这意味着任何 HTML data-* 属性在第一次访问该属性时最初由 jQuery 提取，但之后不再使用。

如果我们重现您的步骤，我们将清楚地看到，尽管将值更改为 value-3，但您的标记中的 data-value 属性将保持不变：

<a class="editable" data-type="select" data-value="1">value-3</a>

然而，jQuery 内部的data() 方法会存储值的变化。我们可以通过从元素的data() 中提取'value' 属性来看到这一点：

$('.editable').data('value');
> 3

如果你想改变data-value属性来反映这个变化，我们可以自己通过使用jQuery的attr()方法修改属性来做到这一点：

$('.editable').attr('data-value', 3);

我们的标记现在看起来像这样：

<a class="editable" data-type="select" data-value="3">value-3</a>

请注意，如果您尝试设置单独使用 attr() 方法的值，此更改将不会反映在该元素的 jQuery 的 data() 对象中：

<a class="editable" data-type="select" data-value="1">value-1</a>

$('.editable').attr('data-value', 3);

<a class="editable" data-type="select" data-value="3">value-1</a>

$('.editable').data('value');
> 1