B4J Question [BANano] Is it possible to make it accept non-standard attributes?

[Mashiane]

Good day

At the moment, I am able to define an attribute starting with :, all well and good. Thank you.

Q1. Is it possible to also make BANano to accept attributes starting with @ and #?

Thanks in advance.

 

[alwaysbusy]

Can you give an example how the resulting JavaScript should look like?

Alwaysbusy

 

[Toky Olivier]

Q1. Is it possible to also make BANano to accept attributes starting with @ and #?

I think it's impossible even in JS:

 

[DonManfred]

I think it's impossible even in JS

As the error points out @test is not a valid identifier. I suggest to use test or sonething other VALID for the identifier.

 

[alwaysbusy]

You can write it as bare html.

element.SetHTML($"<div @click="onClick">test</div>"$)

This is typical Vue syntax so you will have to use the Vue API to get or set attributes. Something like this.$attrs['@click'] maybe.

Alwaysbusy

 

[Toky Olivier]

You can write it as bare html.

element.SetHTML($"<div @click="onClick">test</div>"$)

This is typical Vue syntax so you will have to use the Vue API to get or set attributes. Something like this.$attrs['@click'] maybe.

Alwaysbusy

When I wrapped Vuetify/Vue 3 in another language, I used the non-contracted form: "v-on:click" instead "@click".

 

[alwaysbusy]

This could be a method to retrieve such a attribute, BUT it is probably a huge overkill in this case and you should use the existing Vue API:

It does however show the power of BANano and why you could actually write a complete Vue framework alternative right in B4J! ?

public Sub GetAttribute(element As BANanoElement, attrName As String) As String
    Dim DOMParser As BANanoObject
    DOMParser.Initialize2("DOMParser", Null)
   
    Dim parents() As BANanoElement = element.Parent("")
    Dim obj As BANanoObject = DOMParser.RunMethod("parseFromString", Array(parents(0).GetHTML,"text/html")).Result
    Return obj.RunMethod("getElementById",element.Name).GetField("attributes").GetField(attrName).GetField("nodeValue").Result   
End Sub

Alwaysbusy

 

[Mashiane]

Can you give an example how the resulting JavaScript should look like?

Alwaysbusy

Thanks, just to add

Using @
Currently I am using the 'v-on' directive to bypass the @ shortcut for such. Besides this I have seen a lof of stuff on the lastest Angular almost starting with @ etc. Confusing.

Using #
before, using ...

<slot name="header"></slot>

was perfectly acceptable in Vue2, Vue3 expects

<template #header"></template>

I have recently find out that I can instead write it as "v-slot:header" and BANano accepts it in the small tests I have done so far due to how <template> is "compiled". I am using the full power of BANano to build my HTML trees based on conditions chosen in the abstract designer and then I get these with GetHTML and then feed to the "template" key of my component options. I was avoiding using a stringBuilder for this because BANano is capable.

Pity I cant reproduce the error messages at the moment, I don't recall what I did.