Your target selectors may use this pseudo-selector
to reference the origin element that triggered the change.
The :origin placeholder will be replaced with a target derived
from the origin element.
Default origins
The origin element is automatically set for many actions, for example:
Example
Below we see two links that will each update the <div> next to them.
This requires a rather verbose [up-target] attribute:
<a href="/tasks/1" up-target="a[href='/tasks/1'] + div">Show task 1</a> <!-- mark-phrase "a[href='/tasks/1'] + div" -->
<div>Task 1 will appear here</div
<a href="/tasks/2" up-target="a[href='/tasks/2'] + div">Show task 2</a> <!-- mark-phrase "a[href='/tasks/2'] + div" -->
<div>Task 2 will appear here</div
We can simplify the [up-target] by referencing the followed link by :origin:
<a href="/tasks/1" up-target=":origin + div">Show task 1</a> <!-- mark-phrase ":origin + div" -->
<div>Task 1 will appear here</div
<a href="/tasks/2" up-target=":origin + div">Show task 2</a> <!-- mark-phrase ":origin + div" -->
<div>Task 2 will appear here</div
Setting the origin programmatically
When updating fragments programmatically through functions like up.render()
you may pass an origin element as an { origin } option:
element.addEventListener('click', function(event) {
up.render('.preview', { origin: element })
})
You do not need to pass an { origin } for functions that already have a
natural origin:
up.follow(link) // link will be set as { origin }
Tip
Ensuring an origin is set may improve the precision of fragment lookup, even if
a target selector doesn't contain an :origin reference.
In the example above, Unpoly would prefer to match .preview in the
region of the origin.
If no origin is known, Unpoly will always match the first .preview in the
current layer.
