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

我想了解X-editable如何存储值。X-editable就地编辑插件如何存储值？

例如，我有以下代码：

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

正如你所看到的，它工作得很好。在第一步中，我声明下拉的值等于“值-1”，然后在JavaScript中将其更改为“值-2”。因此，您可以在页面上显示“值-2”，在点击下拉相同的值后，可以选择“值-2”。

在这一步，我将修改JavaScript中的位，如下：
```
//$('.editable').html('value-2'); 
$('.editable').data('value',2); 
```
同样的结果是相当可预期的。您将在页面上看到“值-1”，但在打开下拉菜单时将选择“值-2”。
现在让我们改变JavaScript代码以相反的方式
```
$('.editable').html('value-2'); 
//$('.editable').data('value',2); 
```
这样的修改后的页面上的值将等于“值-2”，但在下拉选择的值开始编辑时将成为“价值1”。所以也是非常合理的行为。

问：

预计不会对我来说什么是是，节省通过点击编辑控制的“确定”按钮不会改变data-value属性的变化，它只能改变显示的文本。例如，如果我们将值更新为"value-3"并单击“确定”，data-value属性将仍然等于1.那么插件在再次打开时如何在下拉列表中选择适当的值？

UPD：

从更改代码的编辑价值的最恰当的方法是使用

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

来源

2014-10-01 Sergey Malyutin

HTML的data-*属性和jQuery的data()方法是不一样的东西。 jQuery的文件如何处理HTML data-*属性通过它的data()方法在data()方法页的HTML5 data-* Attributes小节：

在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()方法将有存储值更改。我们可以从拉动'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>

确实注意到的是，如果

<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

：您尝试设置单独使用 attr()方法的价值，这个改变不会被jQuery的 data()对象为元素中体现

来源

2014-10-10 10:27:13

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

回答

相关问题