Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dom manipulation #13

Open
rraammiinn opened this issue Jul 4, 2023 · 2 comments
Open

dom manipulation #13

rraammiinn opened this issue Jul 4, 2023 · 2 comments
Labels
question Further information is requested

Comments

@rraammiinn
Copy link

what's the proper way of dom manipulation in python side (how to select elements) ?

@manatlan manatlan added the question Further information is requested label Jul 4, 2023
@manatlan
Copy link
Owner

manatlan commented Jul 4, 2023

how to select elements

you can't ;-)
in fact, you should keep the instance of a htag element in a ref ...

example:

# admit you create an element div
mydiv = Tag.div("hello")

# you append mydiv to the current tag instance
self += mydiv

# if you want to change attributs ... it's like that
mydiv["class"]="mycolor"
mydiv["title"]="it's my div"

# if you want to add an event ... it's like that
mydiv["onclick"]= self.mymethod

# if you want to change content... it's like that
mydiv.set("hello world")

# if you want to add nodes... it's like that
mydiv += Tag.span( "a sub element of mydiv " )

# if you want to clear content... it's like that
mydiv.clear()

# if you want to remove the node... it's like that
mydiv.remove()

# and you can iterate on its childrens
# (but here, in context : it has no sense, because you just removed it with the previous statement ;-) )
for i in mydiv.childs:
    ...

alternativly, you could do something like that (but it's a bad practice) :

# you append your div at its init ...
self += Tag.div( "hello" )

# and refer to it, lately
mydiv = self.childs[-1]  # refer to last added tag

it's pretty basic ... but it works well ;-)

@rraammiinn
Copy link
Author

how to select elements

you can't ;-) in fact, you should keep the instance of a htag element in a ref ...

example:

# admit you create an element div
mydiv = Tag.div("hello")

# you append mydiv to the current tag instance
self += mydiv

# if you want to change attributs ... it's like that
mydiv["class"]="mycolor"
mydiv["title"]="it's my div"

# if you want to add an event ... it's like that
mydiv["onclick"]= self.mymethod

# if you want to change content... it's like that
mydiv.set("hello world")

# if you want to add nodes... it's like that
mydiv += Tag.span( "a sub element of mydiv " )

# if you want to clear content... it's like that
mydiv.clear()

# if you want to remove the node... it's like that
mydiv.remove()

# and you can iterate on its childrens
# (but here, in context : it has no sense, because you just removed it with the previous statement ;-) )
for i in mydiv.childs:
    ...

alternativly, you could do something like that (but it's a bad practice) :

# you append your div at its init ...
self += Tag.div( "hello" )

# and refer to it, lately
mydiv = self.childs[-1]  # refer to last added tag

it's pretty basic ... but it works well ;-)

thanks .

it worked but there is two problems :

  1. dom manipulation resets elements content .
  2. there isn't an easy way for two way data binding .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants