Dynamically setting link/target for repeater items?

Ask the community
,
1

I have a repeater that has items loaded dynamically by calling a backend function. The items have to respond to onClick events and link to different locations based on their data.
In some cases, they need to show a local page in the same window and pass some data to it. I do that with saving the data to session storage and winLocation.to() . No problem there.
However, in some other cases, they need to open an external link in a new tab/window (I know it’s a browser thing, but you know what I mean. target=“_blank”). I understand that this cannot be done with winLocation.to() and, afaik, there is no LinkableMixin link/target for the item in the repeater’s onItemReady().
It thought of adding a collapsed text and setting it’s link/target, but I couldn’t find a way to simulate click() for it.
Any workaround?

Here is some code:

import wixLocation from 'wix-location'; 
import {session} from 'wix-storage';
import {getSomeData} from 'backend/data';

$w.onReady(() => {
    getSomeData().then((data) => {
        $w('#repeater').data = data;
    });
});

export function repeater_itemReady($item, itemData, index) {
    // Setting item's data here
}

export function repeaterItem_click(event) {
    if (needToLinkToExternal(event.target)) {
        // I NEED TO OPEN AN EXTERNAL LINK IN A NEW TAB HERE!
    } else {
        session.setItem('some_id', getSomeIdForItem(event.target));
        wixLocation.to('/anotherpage');
    }
}
2

Hi Quinn,

Have you tried setting the html content of the text element with the URL and target values? Something like:

$w("#text1").html = '<a href="https://www.w3schools.com" target="_blank">Text</a>'
3

I haven’t. The problem was that I don’t want the text and if it’s hidden/collapsed it’s not clickable. I wonder if:

$w("#text1").html = '<a href="https://www.w3schools.com" target="_blank" />';

Would work…

In any case, I solved it eventually by covering the item with a button styled with transparent background and borders and text color that matches the item’s background. I’ve made the text to be “i” and since the item has some padding, the button is not visible. Then I set the button’s link/target dynamically in inItemReady(). Not awesome but good enough for this scenario.