function outside litedom

[kethan]

how to call custom event outside litedom scope?

Eg.

<script> function a() { console.log('a') } </script>

<button @some-click="a()" class="button-outline">DOWN

[brylie]

This is a general JavaScript question, but the function is in a different scope than the LiteDom instance. So, you would have to figure out a way to import the function into the LiteDom scope, or attach it to something global like window. What about defining your function in the same script tag where you define the LiteDom instance?

[kethan]

Thanks for answering. Firstly how to create custom events that can be called outside litedom scope?

Eg.

https://tencent.github.io/omi/site/docs/index.html#/event?index=1&subIndex=2

[brylie]

@kethan if the function is defined outside of the JavaScript scope where the LiteDom instance is defined, you have to import it into the same scope as the LiteDom instance. Otherwise, a LiteDom instance cannot find the function. How is your code organized?

[kethan]

Oh ok that means litedom can only call it's scope functions not the outside of it's scope. Then how can I use a litedom component in vue or angular for reusing?

[brylie]

that means litedom can only call it's scope functions not the outside of it's scope

This is generally true in JavaScript, in that there is local and global scope:

https://scotch.io/tutorials/understanding-scope-in-javascript

If something is not defined in the global scope, meaning available everywhere, then it needs to be defined or imported into local scope.

In order to import a LiteDom component into a Vue project, you would probably need to define it in its own file and export the LiteDom instance first.

https://coryrylan.com/blog/using-web-components-in-vue

[kethan]

Oh nice thanks for the resources.

[kethan]

Unable to dispatch custom event.

https://jsfiddle.net/kethan/2cbjnuv5/4/

[brylie]

Just define all of your JavaScript in the same script tag.

[kethan]

Still not working. Can you check and let me know?

[kethan]

The same similar code is working on other similar libraries

[brylie]

In the fiddle you show, I get the following console error:

TypeError: this.dispatchEvent is not a function

I think this is referring to the LiteDom instance, not the DOM element. You might need to dispatch the event from an actual DOM element, and possibly listen for the event in a parent DOM element.

[kethan]

In the fiddle you show, I get the following console error:

TypeError: this.dispatchEvent is not a function

I think this is referring to the LiteDom instance, not the DOM element. You might need to dispatch the event from an actual DOM element, and possibly listen for the event in a parent DOM element.

If you can edit my code it will be very useful. Thanks

[kethan]

Ques.2:

Two-way data binding is not reflected on view on loading the page.

https://jsfiddle.net/kethan/L0xz2q6d/2/

[brylie]

For question 1, it would be good to have a semantically correct example from you, as part of due diligence. Perhaps just get a reference to the DOM item directly, rather than using properties of this.

Please consider opening a second support request for question 2, here or on StackOverflow.