Internal link in repeat anchor tag not working still

Wappler General Bugs
1

I just applied this patch @patrick but it throws this error in console:

BaseComponent.js:59 TypeError: Cannot read properties of null (reading 'startsWith')
    at s._stateHandler (link.js:93:1)
    at s.init (link.js:52:1)
    at s.constructor (BaseComponent.js:48:1)
    at s (api.js:5:1)
    at t.hasOwnProperty.t.constructor (api.js:47:1)
    at new s (api.js:5:1)
    at s.$createChild (BaseComponent.js:139:1)
    at s.<anonymous> (BaseComponent.js:271:1)
    at Object.walk (dom.js:186:1)
    at Object.walk (dom.js:191:1)

When undoing the patch it works fine again.

My html:

   <div is="dmx-repeat" id="repeatLectures" dmx-bind:repeat="lectures">
                  <li class="nav-item">
                    <a dmx-bind:href="/watch/{{coursePublicRetrieve.data.queryCourse.id}}/{{id}}" class="nav-link ks-status-badge" dmx-class:ks-status-badge--success="progress[0].lecture_progress == 100" internal="true">
                      <i class="bi bi-circle me-2" dmx-show="progress[0].lecture_progress != 100"></i>
                      <i class="bi bi-check-circle-fill me-2" dmx-show="progress[0].lecture_progress == 100"></i>
                      <span>{{lecture_name}}</span></a>
                  </li>
                </div>

Edit: fixed by adding another href="/watch/" to the element.
So the problem is that I don't want a static 'href' in my repeat, which is why I left it out and only used dmx-bind:href="/watch/{{coursePublicRetrieve.data.queryCourse.id}}/{{id}}"
You can decide if this is desired behaviour or a bug :slight_smile:

3

@Teodor analyse the dmx-bind:href expression and tell me if you consider it valid

This will be a fun bug report, given the inconsistency of expressions. This is not indicative of a user fault, but rather the fact there seem to be multiple ways to construct such expression through the Wappler editor.

For those unclear, it's my belief such kind of variable interpolation like {{id}} only works in HTML, not in Wappler attributes.

Edit:

The question that remains, was this working in AppConnect 1?

4

Wappler editor does not create links like:

dmx-bind:href="/watch/{{coursePublicRetrieve.data.queryCourse.id}}/{{id}}"

Wappler editor always creates the links like:

dmx-bind:href="'/watch/' + coursePublicRetrieve.data.queryCourse.id + '/' +id"

Dynamic values inside dynamic attributes using {{ }} are probably added by the user. Wappler does not create such values.

@Apple
The topic you mention is just showing you didn't use dynamic attributes for creating a dynamic link ...

1 Like
5

Tried different things, and it all works. Inside a repeat, internal anchor tags:

  1. dmx-bind:href="direct_url_param"
  2. dmx-bind:href="/some-path/id={{id_param}}"
  3. dmx-bind:href="'/some-path/id=' + id_param"

No errors in console.

@Apple Using {{}} in expressions results in much cleaner code - without having to deal with single quotes and pluses. Given that we mostly live in the code view, its common for us to do bindings like this.

6

The correct way to use dynamic expressions is

dmx-bind:href="'/some-path/id=' + id_param"
7

You have another href attribute on the element?
In my case I didn't. The only href was one with dmx-bind in front of it.

To join the other discussion:

Yes same here.

9

I noticed you wrote that adding this href, weirdly, makes it work. Not the case for me. Don't have to do anything like this.