Appframe Knowledge Base

1 hits

Appframe Web Templating - Overview

<!-- Appframe Web Templating

Add data-object-id="dsMyData" to an element to create a databound scope. This element
and all sub-elements will have the same scope (until you specify another data-object-id).

Use data-templating="item-list" to render one copy of your template per record.

Use data-templating="current-item" to render one copy of your template for current record only

Template IDs:
Mark the root of your template with data-item-template="default" or any of the following template IDs
The template engine will look for templates from the bottom of the list. For a new record it 
will first look for new-item-edit. If this is not found it will look for current-item-edit, then 
it will look for current-item, and then finally it will pick default if no other templates are defined.

Binding Updatable Fields:
Use data-field="MyField" to databind an element to a field in your dataobject.
You will get 2-way binding, changes to the data-object will show in the element,
and input/changes in the element will be posted to the dataobject

Binding Attributes:
Use data-attr="src:/images/<%=PictureName%>" This is a one way binding (nothing is posted back to the dataobject)
Use data-attr="href:/persons?<%=PersonID%>"
Use data-current-index to bind current index to element
Use data-record-count to bind datalength to element

Use data-action="save" to force the data-object to save changes to the database
Use data-action="new" to add a new record
Use data-action="cancel" to abort editing (and make any edited values go back to their saved state)
Use data-action="edit" to set the dataobject into edit-mode (and change template(s) if relevant)
Use data-action"delete" to delete current record
Use data-action="done" to save if there are changes or cancel editmode if not dirty
Use data-action="next" to move to next item in dataobjet
Use data-action="previous" to move to previous item in dataobjet

Use data-options="dsMyOptionsDatasource" in a <SELECT> element to create <OPTION> elements.
Use data-text="MyFieldname" to set option text
Use data-value="AnotherFiledname" to set option values (optional)

Use data-templating="lookup" and add an id="myID" to define a lookup
Use data-display-fields="MyField, AnotherField" to set what fields should be displayed in the lookup
The lookup can be used several places in the page.
To use the lookup for an input set data-lookup-id="myID"
and set data-lookup-bindings="field1=field2, field3=field4"

Use type="text" and data-datepicker="date" to enable datepicker for a date field.
Use type="text" and data-datepicker="datetime" to enable date and time picker for a datetime field.


dataobject web-templating · Perma link post comment Posted by: Sigmund Lunde (27-des-2014)