Skip to content

Commit 089a303

Browse files
committed
Add documentation for as-array and as-object attributes
1 parent c92fd6c commit 089a303

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

docs/views/template-syntax/view-attributes.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,42 @@ this.container.querySelectorAll('*');
188188
this.modal.close();
189189
```
190190

191+
192+
### `asArray` attribute
193+
194+
Similar to the `as` attribute, a property with the name of the attribute value is made available on the component but in this case is an `array`. Used by views in a `each` block to provide a reference in the controller to the individual item.
195+
196+
```jinja
197+
{{each items as #item, #index}}
198+
<input as-array="itemEditor">{{#item}}</input>
199+
{{/each}}
200+
```
201+
202+
```js
203+
this.itemEditor[index]; // references the Component or DOM element for item at `index`
204+
```
205+
206+
### `asObject` attribute
207+
208+
Similar to the `as-array` attribute, a property with the name of the attribute value is made available on the component. This attribute takes a second argument that is the proptery key to use as the property on the object.
209+
210+
```jinja
211+
<ul>
212+
{{each _page.items as #item}}
213+
<li as-object="listItems, #item.id">{{#item.name}}
214+
{{/each}}
215+
</ul>v
216+
```
217+
218+
```js
219+
this.page.model.set('_page.items', [
220+
{id: 'a', name: 'Item A'},
221+
{id: 'b', name: 'Item B'},
222+
]);
223+
224+
this.listItems.a // references the Component or DOM element for "Item A"
225+
```
226+
191227
### `inherit` attribute
192228

193229
Adding the `inherit` attribute changes the behavior of attribute lookup within the instantiated view. By default, attribute values are only defined in the view that they are passed into explicitly. Passing attribute values through one view into another normally requires manually repeating the attributes, such as `class="{{@class}}"`. `inherit` modifies the default behavior, making all attributes of the parent view instance implicitly available as well. Explicitly providing an attribute will take precedence over `inherit`.

0 commit comments

Comments
 (0)