#Repeater #RepeaterItems #ItemsScope #showMoreText
In this example I will go over the different ways of accessing a repeater item scope. There are many different ways, each with their own pros and cons.
Useful articles to read first:
- at()
Selector scopes in a repeater are divided into two categories, the Global scope and the Repeated item scope.
Global Scope:
The $w() function that is available to your Page and Site code selects elements in the global scope. A selector with global scope can be used to select any element that is not contained in a repeater. You can also use it to select an element that is contained in a repeater.
The following code is an example of how to implement show more/less functionalities to repeater items using $w:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
const shortTextLength = 40;
fullText = $w("#text1").text
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text1").text = shortText;
$w('#repeater1').forEachItem(($w, itemData, index) => {
$w('#button1').onClick((event) => {
if ($w("#text1").text === shortText) {
$w("#text1").text = fullText;
$w("#button1").label = "Show Less";
} else {
$w("#text1").text = shortText;
$w("#button1").label = "Show More";
}
})
})
});
Repeated item scope:
There are two instances where you get a repeated-item-scope selector:
The $item parameter of the forEachItem(), forItems(), and onItemReady() event handlers.
When calling the $w.at() and passing it an event whose context is "COMPONENT_SCOPE". This is usually done in an event handler that handles event on an element inside a repeater.
The following code is the same implementation using $item:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
const shortTextLength = 40;
fullText = $w("#text1").text
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text1").text = shortText;
$w('#repeater1').forEachItem(($item, itemData, index) => {
$item('#button1').onClick((event) => {
if ($item("#text1").text === shortText) {
$item("#text1").text = fullText;
$item("#button1").label = "Show Less";
} else {
$item("#text1").text = shortText;
$item("#button1").label = "Show More";
}
})
})
});
And now using At():
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
const shortTextLength = 40;
fullText = $w("#text1").text
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text1").text = shortText;
$w('#button1').onClick((event, $w) => {
let $item = $w.at(event.context)
$item("#myRepeatedText").text = "Selected";
if ($item("#text1").text === shortText) {
$item("#text1").text = fullText;
$item("#button1").label = "Show Less";
} else {
$item("#text1").text = shortText;
$item("#button1").label = "Show More";
}
})
})
Now looking at the three code examples we get to know how to access repeater item scope using different selectors. It's obvious that if you are trying to access and element it is best using $item, however if you want o add at event the best approach would be to use at() as it sets the selected element based on the event scope.
Hope this helps!
Massa
Amazing, this code fits into my project. Thanks for the examples!