将 x-editable 源代码放入 html 而不是 JavaScript

Question

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

<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 中。这样做的“正确”方式是什么？

Answer 1

来自他们的文档

选项可以通过 javascript $().editable({...}) 或 data-* html 属性来定义。

您可以将 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>