From 089a303c8c78546241769dc9cf6f9ca666078052 Mon Sep 17 00:00:00 2001 From: Craig Beck Date: Mon, 1 Jul 2024 14:35:21 -0700 Subject: [PATCH 1/6] Add documentation for as-array and as-object attributes --- docs/views/template-syntax/view-attributes.md | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/docs/views/template-syntax/view-attributes.md b/docs/views/template-syntax/view-attributes.md index 107cf6d6..dddfb1f7 100644 --- a/docs/views/template-syntax/view-attributes.md +++ b/docs/views/template-syntax/view-attributes.md @@ -188,6 +188,42 @@ this.container.querySelectorAll('*'); this.modal.close(); ``` + +### `asArray` attribute + +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. + +```jinja +{{each items as #item, #index}} + {{#item}} +{{/each}} +``` + +```js +this.itemEditor[index]; // references the Component or DOM element for item at `index` +``` + +### `asObject` attribute + +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. + +```jinja +v +``` + +```js +this.page.model.set('_page.items', [ + {id: 'a', name: 'Item A'}, + {id: 'b', name: 'Item B'}, +]); + +this.listItems.a // references the Component or DOM element for "Item A" +``` + ### `inherit` attribute 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`. From ef6c1512e66a3ee89815df5d4243cdc2b7d4fddd Mon Sep 17 00:00:00 2001 From: Craig Beck Date: Mon, 1 Jul 2024 14:36:25 -0700 Subject: [PATCH 2/6] Style fix for inline code block in h3 headings; made code bigger to better match rest of heading --- docs/_sass/custom/custom.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss index 0b3d5158..a935adc2 100644 --- a/docs/_sass/custom/custom.scss +++ b/docs/_sass/custom/custom.scss @@ -25,3 +25,8 @@ } } } + +h3 > code { + // fix font size of code block in heading + font-size: 1.0rem; +} From 2af8d70687a6378ec1343b079bfb7af859271ed0 Mon Sep 17 00:00:00 2001 From: Craig Beck Date: Mon, 1 Jul 2024 14:38:50 -0700 Subject: [PATCH 3/6] Fix heading to use same casing as attribute --- docs/views/template-syntax/view-attributes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/views/template-syntax/view-attributes.md b/docs/views/template-syntax/view-attributes.md index dddfb1f7..e14676c2 100644 --- a/docs/views/template-syntax/view-attributes.md +++ b/docs/views/template-syntax/view-attributes.md @@ -189,7 +189,7 @@ this.modal.close(); ``` -### `asArray` attribute +### `as-array` attribute 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. @@ -203,7 +203,7 @@ Similar to the `as` attribute, a property with the name of the attribute value i this.itemEditor[index]; // references the Component or DOM element for item at `index` ``` -### `asObject` attribute +### `as-object` attribute 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. From e66203ee7326e3b3b3f235613096f5fba34e5823 Mon Sep 17 00:00:00 2001 From: Craig Beck Date: Wed, 3 Jul 2024 10:56:33 -0700 Subject: [PATCH 4/6] Wordsmith suggestion for a-array Co-authored-by: Eric Hwang --- docs/views/template-syntax/view-attributes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/views/template-syntax/view-attributes.md b/docs/views/template-syntax/view-attributes.md index e14676c2..902faa81 100644 --- a/docs/views/template-syntax/view-attributes.md +++ b/docs/views/template-syntax/view-attributes.md @@ -191,7 +191,7 @@ this.modal.close(); ### `as-array` attribute -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. +Similar to the `as` attribute, a property with the provided name is made available on the component, but in this case the value is an array of multiple references. This is useful in an `each` block, to provide a reference in the controller to every individual item. ```jinja {{each items as #item, #index}} From 8d0c9f805d3660ef762d6ff845e1bba281554ada Mon Sep 17 00:00:00 2001 From: Craig Beck Date: Wed, 3 Jul 2024 10:56:57 -0700 Subject: [PATCH 5/6] Wordsmith suggestions for as-object Co-authored-by: Eric Hwang --- docs/views/template-syntax/view-attributes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/views/template-syntax/view-attributes.md b/docs/views/template-syntax/view-attributes.md index 902faa81..09752e74 100644 --- a/docs/views/template-syntax/view-attributes.md +++ b/docs/views/template-syntax/view-attributes.md @@ -205,7 +205,7 @@ this.itemEditor[index]; // references the Component or DOM element for item at ` ### `as-object` attribute -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. +Similar to the `as-array` attribute, a property with the provided name is made available on the component, but with the value being a map-like object. The second argument to `as-object` specifies the key for each entry. ```jinja
    From c0a9c300e3dbab6fa489cd8c2e2dddc5dca61c8a Mon Sep 17 00:00:00 2001 From: Craig Beck Date: Wed, 3 Jul 2024 10:58:09 -0700 Subject: [PATCH 6/6] Fix markup in as-object doc exmaple --- docs/views/template-syntax/view-attributes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/views/template-syntax/view-attributes.md b/docs/views/template-syntax/view-attributes.md index 09752e74..709a92fe 100644 --- a/docs/views/template-syntax/view-attributes.md +++ b/docs/views/template-syntax/view-attributes.md @@ -210,9 +210,9 @@ Similar to the `as-array` attribute, a property with the provided name is made a ```jinja
      {{each _page.items as #item}} -
    • {{#item.name}} +
    • {{#item.name}}
      • {{/each}} -
    v +
``` ```js