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

   你可以看到它工作得很好.在第一步,我将dropdown的值声明为"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); 
   

   在这样的修改之后,页面上的值将等于"值-2",但是在开始编辑时下拉列表中的选定值将是"值-1".所以也是非常合理的行为.

题:

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

UPD:

从代码中更改可编辑值的最正确方法是使用

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

Answer 1

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

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

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

这意味着任何 HTMLdata-*属性在第一次访问该属性时最初都会被 jQuery 拉取，但此后就不再使用它。

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

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

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

$('.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()，则此更改不会反映在data()该元素的 jQuery 对象中：

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

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

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

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