kweb-core icon indicating copy to clipboard operation
kweb-core copied to clipboard

textContent usage generates invalid js

Open hannomalie opened this issue 5 years ago • 8 comments

I have some issues with Element.text or Element.text(""). My snippet is like

    new {
        div(attributes = mapOf("id" to "main-stats")).new {
            div().classes("row", "stats-row").new {
                div().classes("col-md-12", "col-sm-12", "stat").new {
                    div().classes("data").new {
                        div().new {
                            span().classes("number").text.value = projectsCount.toString()
                            span().text.value = "Projects"
                        }
                    }
                }
            }
        }
    }

and the resulting javascript is something like

document.getElementById("Ko").setAttribute("class", "number");document.getElementById("Ko").textContent=""document.getElementById("Ko").textContent="3"{
var newEl = document.createElement("span");

I think it would be correct if the curly brace after "3" would be shifted to a new line, hence a break could fix this, maybe.

Any thoughts? :)

EDIT: Forgot to say: The error is "SyntaxError: Unexpected identifier" and "Unexpected token {" EDIT: After taking another look, it looks like an unwanted nesting happens with textContent

hannomalie avatar Nov 19 '19 13:11 hannomalie

Hmm....in my example, there seems to simply be a semicolon missing. Adding it would make the js valid, no need for a line break.

hannomalie avatar Nov 19 '19 14:11 hannomalie

I just tried it, your example works just fine. I assumed that projectsCount was an int. Are you using the latest version? Can you give me more information what is happening the posted block?

rpanic avatar Nov 19 '19 14:11 rpanic

thx for your response. I just found out that it works normally in the regular dsl code but not if I use it in an onclick listener. I do

a().onImmediate.click { 
  { document: Document -> document.adminHomeContainer.setAdminHome(projectsCount) }(doc)
}

(simplified code)

And setAdminHome just does all this "new {}" stuff from above.

EDIT: I am using 0.5.7

hannomalie avatar Nov 19 '19 14:11 hannomalie

Note that onImmediate.click {...} should only be used for very simple DOM modifications because DOM changes in the {block} are recorded at page-render time and replayed every time the event occurs.

Should you be using on.click { ... instead?

sanity avatar Nov 19 '19 16:11 sanity

Aha! This works. Okay so the problem is solved. But my expectation was that what i do is a fairly simple dom change, because i just change a container views content. For example if i have a simple, static greeting page, selecting it in the navigation should be an immediate event, shouldn't it?

Thanks so far!

hannomalie avatar Nov 19 '19 20:11 hannomalie

Most DOM changes should be fine - anything cosmetic - it's useful for temporary spinners.

However, document.adminHomeContainer.setAdminHome(projectsCount) seems like more than just a DOM change, no?

sanity avatar Nov 20 '19 08:11 sanity

it adds 5 divs, 2 spans and a p element to an existing element :)

hannomalie avatar Nov 20 '19 14:11 hannomalie

Sorry for the delayed reply.

Kweb doesn't support changes to the URL in immediate events, that might be doable but would be tricky.

sanity avatar Dec 02 '19 02:12 sanity

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

github-actions[bot] avatar Oct 14 '22 04:10 github-actions[bot]