You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello! First of all, I love this project. Really good work.
I just need to know , how to fire an event from client by code,
I mean :
I have a tag on html side
Which is defined with an event listener in a button onclick event .
Everything works fine when I click on button ,but I need to fire this event from client by code , something like :
var myElement = document.getElementsByTagName('simple-counter')[0];
myElement.render();
but does not work , 🆘
may you help me ?
Thanks in advance
The text was updated successfully, but these errors were encountered:
Hi Gabriel! Welcome on board. The main concept of the hybrids is to separate side-effects from a declarative definition of the component.
The example from getting started section includes increaseCount() side effect called internally when a user clicks on button rendered by the component. In general, it should not be accessible outside of the component. It is internal side-effect connected to the component DOM element.
The declarative definition of the component includes count property, which is a public API of the component. It can be defined by the html attribute (statically in HTML) or manipulated dynamically by changing its value in JavaScript. User of the component can do what you are trying to do just by updating value of the "input":
constmyElement=document.getElementsByTagName('simple-counter')[0];myElement.count+=1;// This will update and re-render component
If your real component is more complex (and you really want to expose that side effect programmatically), and your "side-effect" is not a simple as increasing input value, you have two options. Firstly, you can expose your side effect function to the user. A mentioned example is doing that - it exports increaseCount function, so the user might use it:
import{increaseCount}from'./simple-counter';constmyElement=document.getElementsByTagName('simple-counter')[0];increaseCount(myElement);// does the same as in above example
The second option is to provide methods directly on your component definition. However, It is not recommended solution - it tights the definition with side effects making the component harder to test, and encourage to create complex logic inside of the component. To do so you should create a getter property, which returns a function:
constMyElement={doSomething: (host)=>(param)=>{// do something with a hosthost.count=param*10;},count: 0,};
The returned function will be created once, as a getter does not use host properties (cache will save returned function and use it for next invocations).
Hello! First of all, I love this project. Really good work.
I just need to know , how to fire an event from client by code,
I mean :
I have a tag on html side
Which is defined with an event listener in a button onclick event .
Everything works fine when I click on button ,but I need to fire this event from client by code , something like :
var myElement = document.getElementsByTagName('simple-counter')[0];
myElement.render();
but does not work , 🆘
may you help me ?
Thanks in advance
The text was updated successfully, but these errors were encountered: