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

I am trying to understand How X-editable stores the values.

我试图理解X-editable是如何存储值的。

For example I have the following code:

例如，我有以下代码:

HTML:

HTML:
```
<a class="editable" data-type="select" data-value="1">value-1</a>
```
JavaScript:

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" }
        ];
    }
});
```
And here is the jsfiddle to play with

这是一个小提琴

As you can see it works just fine. At the first step I declare the value of dropdown equal to "value-1" and then I change it to "value-2" in JavaScript. As the result you can "value-2" on the page and "value-2" after clicking to dropdown the same value will be chosen.

正如你所看到的，它工作得很好。在第一步，我声明下拉列表的值为“value-1”，然后在JavaScript中将其更改为“value-2”。因此，您可以在页面上选择“value-2”，并在单击后选择“value-2”以下拉相同的值。
At this step I will modify JavaScript a bit as below:

在这一步，我将修改JavaScript如下所示:
```
//$('.editable').html('value-2');
$('.editable').data('value',2); 
```
Again the results are quite expectable. You will see "value-1" on the page, but "value-2" will be selected when opening dropdown.

同样的结果也很令人期待。您将在页面上看到“value-1”，但是在打开下拉菜单时将选择“value-2”。
Now lets change the JavaScript code in the opposite way

现在让我们以相反的方式更改JavaScript代码
```
$('.editable').html('value-2');
//$('.editable').data('value',2); 
```
After such modifications the value on the page will be equal to "value-2", but selected value in dropdown when starting to edit will be "value-1". So also quite logical behavior.

这样修改后，页面上的值将等于“value-2”，但开始编辑时下拉菜单中选择的值将为“value-1”。这也是很符合逻辑的行为。

Question:

问题:

What is not expected for me is that saving the changes by clicking 'ok' button of editable control does not change data-value attribute, it only change the displayed text. For example, if we update the value to "value-3" and click on 'OK' the data-value attribute will be still equal to 1. So how does the plugin choose the proper value inside the dropdown after opening it again?

我不希望看到的是，通过点击编辑控件的“ok”按钮来保存更改不会改变数据值属性，它只会改变显示的文本。例如，如果我们将值更新为“value-3”并单击“OK”，那么data-value属性将仍然等于1。那么插件在打开下拉菜单后如何选择合适的值呢?

UPD:

乌利希期刊指南:

The most proper way to change the value of editable from the code is to use

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

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

1 个解决方案

#1

HTML's data-* attributes and jQuery's data() method aren't the same thing. jQuery documents how it handles HTML data-* attributes through it's data() method in the data() method page's HTML5 data-* Attributes sub-section:

HTML的数据-*属性和jQuery的数据()方法不是一回事。jQuery在data() method页面的HTML5数据-* attributes小节中通过其data()方法处理HTML数据-*属性:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.

从jQuery 1.4.3 HTML 5数据到jQuery数据对象，属性将自动被拉入jQuery数据对象。

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

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

This means that any HTML data-* attribute is initially pulled by jQuery the first time that property is accessed, but after that it is no longer used.

这意味着任何HTML数据-*属性最初都是通过jQuery获得的，这是该属性被访问的第一次，但是之后就不再使用了。

If we reproduce your steps, we will clearly see that despite changing the value to value-3, the data-value attribute in your markup will remain the same:

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

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

However, jQuery's internal data() method will have stored the value change. We can see this by pulling the 'value' property from your element's data():

但是，jQuery的内部数据()方法将存储值更改。通过从元素的数据()中提取“value”属性，我们可以看到这一点:

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

If you want to change the data-value attribute to reflect this change, we can do this ourselves by modifying the property using jQuery's attr() method:

如果您想更改data-value属性以反映此更改，我们可以使用jQuery的attr()方法修改属性:

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

Our markup will now look like this:

我们的标记现在看起来是这样的:

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

Do note though that if you try to set the value using the attr() method alone, this change will not be reflected within jQuery's data() object for that element:

但请注意，如果您试图仅使用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

#1