Appframe Knowledge Base

1 hits

Declarative data binding of fields and buttons

<!-- You can declaratively bind fields and buttons by adding a some data-attributes -->
<!-- To bind fields you specify a data-object-id attribute and a data-field attribute -->
<!-- Declarative field binding supports the following element types -->

<!-- Uneditable text (the form-control-static is for when used in a bootstrap3 form) -->
<p class="form-control-static" data-object-id="dsSomething" data-field="SomeField"></p>

<!-- Editable elements -->
<input type="text" data-object-id="dsSomething" data-field="SomeField">
<textarea data-object-id="dsSomething" data-field="SomeField"></textarea>
<select data-object-id="dsSomething" data-field="SomeField">

<!-- To bind buttons you specify a data-object-id attribute and a data-action attribute -->
<!-- The currently supported actions are: new, save, cancel, delete, previous and next -->
<!-- You can use input type="button" element, but it is recommended to use button elements -->
<!-- (The btn class is to get bootstrap3 style on the buttons. For appframe style use afButton) -->
<button class="btn" data-object-id="dsSomething" data-action="new">New</button>
<button class="btn" data-object-id="dsSomething" data-action="save">Save</button>
<button class="btn" data-object-id="dsSomething" data-action="cancel">Cancel</button>
<button class="btn" data-object-id="dsSomething" data-action="delete">Delete</button>
<button class="btn" data-object-id="dsSomething" data-action="previous">Previous</button>
<button class="btn" data-object-id="dsSomething" data-action="next">Next</button>

web web-templating · Perma link post comment Posted by: Jan Henrik H. Meling (06-feb-2014)