Appframe Knowledge Base


1 hits
3

Web-Templating: data-templating="item-list" or data-templating="current-item"

<!--   Databinding attributes:

	data-object-id="dsRecords" (defining the scope)

   	data-templating="item-list" (will look for data-item-template and then render 
	 one copy of the relevant template per record)
	data-templating="current-item" (will look for data-item-template and render one copy 
	 of the relevant template for current record only)

   	data-item-template="default" (root element for the default item template)
	data-item-template="current-item"
	data-item-template="current-item-edit"
	data-item-template="new-item-edit"
	data-item-template="no-data" (rendered if there are no data returned from database)
	data-add-class-if="test:className" //test must be a javacript condition: data.fieldName === 'Test':MyClass
	data-remove-class-if="test:className" //test must be a javacript condition: data.fieldName === 'Test':MyClass
	
	
   	data-field="FieldName"	(used in elements to bind data)
   	data-datepicker="date" / "datetime" / "time"
	data-attr="src:/file/db/Persons/dsPersons/<%=PrimKey%>/<%=ImageCRC%>" 
	data-attr="href:/persons?<%=ID%>"
	
   	data-action="save" (used in button elements: click button will save record to database)
   	data-action="cancel" 
   	data-action="delete" 
   	data-action="edit" 
   	data-action="new" (used in button elements: set dataobject.currentRow to -1 and fire beginEdit)
   	data-action="clear"  (used in dropdowns to clear fieldvalue)
   	data-action="done"  (saves if dirty, cancel if not dirty)
	data-action="next" 
	data-action="previous" 

   	data-show-newitem (in item-list: allways shows UI for new record, if not present or "false"
	you will need to use an action to show new record UI)
	
	data-edit-focus (used in current-item-edit and new-item-edit for choosing a specific element that should have focuse when entering edit mode)
	
	functions:
	data-template-function (used if custom template is needed. Return name of custom template and this will be used insated of current active template. Must be located on rootelement)
	data-function (can be used on any element and will be executed for each row-rendering)
--->

<!-- Simple bound list of items (all records using same template)-->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
</div>

<!-- Simple bound list of items, highlighting current-item by introducing a second template -->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
  <div data-item-template="current-item" class="active">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
</div>

<!-- Simple bound list of items, editing current-item -->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
  <div data-item-template="current-item" class="active">
    <h4 data-field="Name"></h4>
	<input type="text" data-field="Address"></input>
	<br>
	<input type="text" data-field="ZipCode"></input>
	<input type="text" data-field="City"></input>
  </div>
</div>

If you need a list of editable items: put inputs in the "default" template.

If you want a popup form for editing, make a "current-item-edit" template with a bootstrap
modal element (you need to trigger the edit by calling the beginEdit on the dataobject.

To trigger an edit, use a button with data-bind="edit"

If you would like to allways show a "new blank record" (enabling the user to input a new item)
just set the "data-show-newitem" attribute (in the data-list root element).

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

Robert Vinkovic :
Solution, not the only one but the only one I have managed to make work: parent div must have data-list="manual-edit" with 2 child divs one with data-item-template="read-only" and one with "edit" (22-jan-2015)
Peter Butt :
(23-feb-2015)
Martin Vaaden :
Tried using data-remove-class-if some time ago, but seems like it's not in use any more (?) Seems like data-add-class-if will add class if check == true and remove if check == false (12-jun-2015)