This page (revision-32) was last changed on 21-Apr-2017 08:45 by Dieter Käppel

This page was created on 29-Mar-2017 08:37 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
32 21-Apr-2017 08:45 14 KB Dieter Käppel to previous
31 21-Apr-2017 08:45 14 KB Dieter Käppel to previous | to last
30 10-Apr-2017 17:33 14 KB Dieter Käppel to previous | to last
29 10-Apr-2017 17:17 14 KB Dieter Käppel to previous | to last
28 10-Apr-2017 15:23 14 KB Dieter Käppel to previous | to last
27 10-Apr-2017 06:51 14 KB Dieter Käppel to previous | to last
26 07-Apr-2017 20:46 14 KB Dieter Käppel to previous | to last
25 07-Apr-2017 19:44 13 KB Dieter Käppel to previous | to last
24 07-Apr-2017 19:37 13 KB Dieter Käppel to previous | to last
23 07-Apr-2017 19:36 13 KB Dieter Käppel to previous | to last
22 07-Apr-2017 19:31 12 KB Dieter Käppel to previous | to last
21 05-Apr-2017 16:46 12 KB Dieter Käppel to previous | to last

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 56 added 14 lines
!!Define und Insert
Mit den Controls define und insert können weitere Elemente in ein Template eingefügt werden. Dabei ist define kein echtes Control, weil es durch das control applyTemplate aktiv ersetzt wird:
{{{
<div control="{template: 'some-panel', apply: $.fn.Panel}" style="margin-top: 10px;">
<div>Panel Template</div>
<div control="{insert: 'content'}"/>
</div>
<div control="{applyTemplate: 'some-panel'}">
<div control="{define: 'content'}">Individual Content 2</div>
</div>
}}}
At line 72 added 50 lines
!!For
Um Elemente wiederholen zu können, wird das Control for genutzt:
<div control="{for: {begin: 0, end: 2, variable: 'index'}}">
<label for="{prefix}:input" control="{interpolate: true}">Input {index}</label>
<input control="{interpolate: true, apply: $.fn.InputText, id: 'input'}"/>
</div>
!!Interpolate
Das Control interpolate führt zum Ersetzen von Expressions in Attributen und Text-Children des aktuellen Tags:
{{{
<div control="{for: {begin: 0, end: 3, variable: 'x'}}">
<div control="{interpolate: true}">Iteration No. {x}</div>
</div>
}}}
!!Id
Mit dem Control id kann das Attribut id gesetzt werden, sodass übergeordnete id-Attribute berücksichtigt werden, ähnlich wie bei den JSF-IDs:
{{{
<form id="form">
<div control="{id: 'text'}">Some Text</div>
</form>
}}}
__Ergebnis:__ Das innere div-Element erhält das Attribut id="form:text".
!!Style
Mit dem Attribut kann ein Style gesetzt werden. Grundsätzlich sollten Styleklassen mit dem Attribut class gesetzt werden und diese in einer CSS-Datei definiert werden. Einzelne Styles können mit dem Attribut style gesetzt werden. Manchmal werden jedoch dynamische Styles gebraucht.
Ein beliebter Kunstgriff ist, Teile der Page zunächst mit dem Style display oder visibility unsichtbar zu machen und erst nach fertiger Aktivierung anzuzeigen:
{{{
<div style="display: none;" control="{id: 'activate-test', after: {style: {display: 'block'}}}">
[...]
</div>
}}}
!!After
Normalerweise werden zuerst die aktuellen Controls aktiviert, dann die Controls der untergeordneten Tags. Manchmal kann es erforderlich sein, dass die untergeordneten Tags bereits aktiviert sind. Dazu gibt es das Control after:
{{{
<div style="display: none;" control="{id: 'activate-test', after: {style: {display: 'block'}}}">
[...]
</div>
}}}
__Erklärung:__ Es handelt sich um dasselbe Beispiel wie bei dem Control style, jedoch geht es hier um den Aspekt after. Das Control after enthält als Wert wieder eine Liste von Controls, die nach der Aktivierung der Children ausgeführt werden.