Put x-editable source in html instead of JavaScript

Question

Per https://vitalets.github.io/x-editable/docs.html, a select menu is configured as follows:

<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>

I would like the source to be stored in the page's HTML instead of JavaScript. What is the "proper" way of doing so?

Answer 1

From their docs

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

You can just pass them JSON encoded as 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>