Skip to content

Commit

Permalink
Merge branch 'master' of github.com:derbyjs/derby into convert-browse…
Browse files Browse the repository at this point in the history
…r-tests
  • Loading branch information
craigbeck committed Jul 3, 2024
2 parents dddcef2 + 59db1ad commit c06df7c
Show file tree
Hide file tree
Showing 7 changed files with 631 additions and 570 deletions.
5 changes: 5 additions & 0 deletions docs/_sass/custom/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,8 @@
}
}
}

h3 > code {
// fix font size of code block in heading
font-size: 1.0rem;
}
36 changes: 36 additions & 0 deletions docs/views/template-syntax/view-attributes.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,42 @@ this.container.querySelectorAll('*');
this.modal.close();
```


### `as-array` attribute

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}}
<input as-array="itemEditor">{{#item}}</input>
{{/each}}
```

```js
this.itemEditor[index]; // references the Component or DOM element for item at `index`
```

### `as-object` attribute

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
<ul>
{{each _page.items as #item}}
<li as-object="listItems, #item.id">{{#item.name}}</li>
{{/each}}
</ul>
```

```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`.
Expand Down
6 changes: 3 additions & 3 deletions src/Page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import {
} from 'racer';

import { type App } from './App';
import components = require('./components');
import * as components from './components';
import { Controller } from './Controller';
import documentListeners = require('./documentListeners');
import EventModel = require('./eventmodel');
import { EventModel } from './eventmodel';
import { type PageParams } from './routes';
import * as derbyTemplates from './templates';
import { Context } from './templates/contexts';
import { Expression } from './templates/expressions';
import documentListeners = require('./documentListeners');
import textDiff = require('./textDiff');

const {
Expand Down
Loading

0 comments on commit c06df7c

Please sign in to comment.