Static string cleared from attribute

This issue has been tracked since 2023-02-18.

Example:

const data = reactive({
  class:'css'
})
<li class="prefix-${() => data.class}-postfix" >Title</li>

renders to:

<li class="css" >Title</li>

instead of:

<li class="prefix-css-postfix" >Title</li>

notice "prefix/postfix" removed from the class attribute.

I understand that this can be refactored (to include all inside the function) but I'd expect static string before/after observable to be left unchanged.

This example is oversimplified but the idea is that template holds static values (to render even without dynamic part being set).

justin-schroeder wrote this answer on 2023-02-19

Yeah, I understand that it may seem intuitive for it to work that way, but it does not. Attributes are all or nothing — similar to many reactive frameworks where the expression is the value of the argument (in the <div :class="expHere">). It would be quite a lot more "expensive" in compute and memory to allow this types of arbitrary concatenation. If you want to perform string interpolation, just include that as the output of your fn.

Thanks for checking out arrow though!

More Details About Repo
Owner Name justin-schroeder
Repo Name arrow-js
Full Name justin-schroeder/arrow-js
Language TypeScript
Created Date 2022-11-08
Updated Date 2023-03-28
Star Count 1240
Watcher Count 21
Fork Count 22
Issue Count 7

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date