将 x-editable 源放在 html 而不是 JavaScript

Question

根据 https://vitalets.github.io/x-editable/docs.html，select 菜单配置如下：

<a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status"></a>
<script>
$(function(){
    $('#status').editable({
        value: 2,    
        source: [
              {value: 1, text: 'Active'},
              {value: 2, text: 'Blocked'},
              {value: 3, text: 'Deleted'}
           ]
    });
});
</script>

我希望将源存储在页面的 HTML 而不是 JavaScript 中。 "proper" 这样做的方法是什么？

Answer 1

来自他们的文档

Options can be defined via javascript $().editable({...}) or via data-* html attributes.

您可以将它们 JSON 编码为 data-attributes

<a href="#" id="status" data-type="select" data-pk="1" data-url="/post"
            data-title="Select status" data-value="2"
            data-source='[{value: 1, text: "text1"}, {value 2, text: "text2"}, ...]'> </a>

将 x-editable 源放在 html 而不是 JavaScript

Put x-editable source in html instead of JavaScript

javascript

jquery

x-editable