Attributes provide additional information about weex tags. All weex tags can have attributes, attributes are always specified in the start tag and usually come in name/value pairs like: name=“value”. Mustache can be used inside a value. All of weex tags have the following attributes:
Specifies a unique id for an element in <template>
scope. With id
attribute you can easily refer a weex tag.
<div id="logo"></div> <div id="item-{{index}}"></div>
Specifies an inline style for an element.
<div style="width: 200; height: 200"></div> <div style="padding: {{x}}; margin: 0"></div>
Specifies one or more classnames for an element (refers to a class in a style sheet).
<div class="button"></div> <div class="button {{btnStatus}}"></div>
We can use the repeat
attribute to render a list of items based on an array. The repeat
attribute has a special syntax in the form of item in items
, where items
is the source data array and item
is an alias for the array element being iterated on.
<div repeat={{list}}></div> <div repeat={{item in list}}></div>
Provide a boolean value to decide whether or not to display current tag.
<div if="true"></div> <div if="{{opened}}"></div> <div if="{{direction === 'row'}}"></div>
By providing the value of tree or node, it determines the progress of rendering.
<div append="tree/node"></div>
Register event handlers on weex tag.
<div onclick="openDetail"></div> <div onappear="{{loadMore}}"></div>
Weex is basically following HTML attribute naming rule, so please do not use CamelCase in your attribute, kebab-case with “-” as delimiter is much better.