JSFiddle - React, Tailwind, and code Playground

by cilex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<script src="http://code.cloudcms.com/alpaca/1.5.13/bootstrap/alpaca.min.js"></script>
<link rel="stylesheet" href="http://code.cloudcms.com/alpaca/1.5.13/bootstrap/alpaca.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>Attribute options.fields[XXX].order is set according to the order in which XXX occurs in the bindings : Result is <font color="green"><b>OK</b></font></div>
<div id="alpaca"></div>

JavaScript

var data = {};

var bindings = 
	{
        // expected to be the first field
        "enabled":"center-tab-1-content",
        "code":"center-tab-1-content",
        "label":"center-tab-1-content",
        "type_id":"center-tab-1-content",
        "object_class_id":"center-tab-1-content",
        "instructions":"center-tab-1-content",
        "is_mandatory":"center-tab-1-content",
        "is_mandatory_presence":"center-tab-1-content",
        "is_multiple":"center-tab-1-content",
        "reference_class_id":"center-tab-1-content",
        "reference_code":"center-tab-1-content",
        "is_list_display":"center-tab-1-content",
        "is_filterable":"center-tab-1-content",
        // NOT expected to be the first field
        "is_private":"center-tab-1-content",
        "notes":"center-tab-1-content",
        "virtual_rev_customdataasfield":"center-tab-1-content",
        "virtual_rev_customfieldvalueasfield":"center-tab-1-content",
        "virtual_rev_modeheadermap":"center-tab-1-content",
        "virtual_rev_tabfieldmap":"center-tab-1-content",
        "virtual_right_16":"center-tab-2-content",
        "virtual_right_17":"center-tab-2-content",
        "virtual_right_18":"center-tab-2-content",
        "virtual_right_19":"center-tab-2-content",
        "virtual_events":"center-tab-3-content",
        "id":"center-tab-4-content",
        "virtual_action_200":"center-toolset-1",
        "virtual_action_204":"center-toolset-2",
        "virtual_action_205":"center-toolset-2"
    };

var schema = {"title":"CustomField","description":"CustomField Object...