Autosync allows for adding styles dynamically based upon arbitrary conditions. Attributes asclasses and asstyles serve this purpose.

Format of these attributes is cond ? list1 | list2, where cond is a computable JS condition. In $value and $index variables the model and index of the element inside the collection are provided (if the current model is not a collection, then $index is -1).

<div class="item task_item"
     asclasses="$value['assigned_at'] < '2021-08-04' && !$value['completed_at'] ? warn | "
     asstyles="$index == 0 ? margin-left: -25px"
     data-id="{$value['id']}">
/* ... */
</div>
               

For separating different conditions in asstyles attribute use doubled commas.

If you need classes or styles only for the case when condition is true, i.e. the second list is empty, you can use the short form and omit | in the end.

Just the same way you can add arbitrary attributes to the elements with asattrs attribute (names and values are separated by = symbols):

<select class="list" asmodel="data.users" data-value="{$value['user_id']}">
   <option value="{$value['id']}" asattrs="$value['id'] == 0 ? disabled">{$value['name']}</option>
</select>
               

If you need attributes only for the case when condition is true, i.e. the second list is empty, you can use the short form and omit | in the end.

You can access parent data one or several levels up in your conditions if you need it. Take a look at this example:

<select class="list" asmodel="data.states" data-value="{$value['state_id']}">
   <option value="{$value['id']}" asattrs="$value['id'] == $value['__parent']['state_id'] ? selected">{$value['state']}</option>
</select>
               

Notice how the parent data object for option element inside the template is the current data object for select element, which is a root element with asmodel attribute defined.