Comments (6)
It worked! TY for the help.
I also created a codesandbox to share. If you want, you can use it as an example
https://codesandbox.io/embed/r5nkxjo4ln
from hybrids.
There are two options with event listeners. For example, render factory uses globally attached event listener to trigger re-render all of the elements. For you it could look like this:
const set = new Set();
// In this case your event listener is attach once, but it is always there
// It is proper pattern if you factory do something in sync between instances
document.addEventListener('event-name', () => {
set.forEach(...);
});
export function myFactory() {
return {
get: ...
connect: (host) => {
set.add(host);
return () => set.remove(host);
},
};
}
The second option is to attach event listener in connect
and then remove it in disconnect
method directly:
export function myFactory() {
return {
get: ...
connect: (host) => {
// holding reference to the callback is most important here,
// as it has to be removed in disconnect
const cb = () => { ... };
document.addEventListener('event-name', cb);
return () => document.removeEventListener('event-name', cb);
},
};
}
Also, you might want to look at the built-in factories source code. You can find there examples of how to add event listeners.
About docs - I am working on it right now (you can sneak peek on docs
branch). I want also add some patterns, that was asked in issues.
from hybrids.
You can use dispatch
from the library for simpler syntax:
import { dispatch } from 'hybrids';
dispatch(document, 'event-name', { detail: { value: 0 } });
It creates CustomEvent for you, passes options and dispatches it.
from hybrids.
It gave me an error (0 , _hybrids.dispatchEvent) is not a function
I commented the line so it's easier if you want to test
from hybrids.
The name isn't dispatchEvent, but dispatch
from hybrids.
Yes, you are right. I was writing it on my phone, fixed comment with the proper name.
from hybrids.
Related Issues (20)
- Small Type Inferencing Issue with Property<E, V> HOT 6
- Cannot pass an object to the API via the "list" method HOT 7
- version 8.2.17 backwards compatibility is broken! HOT 9
- Expand the functionality of drafts
- sync() with nested models is broken HOT 4
- Allow storing an object in a component property HOT 4
- Add partial loading of model data HOT 3
- Why do you remove the lastValue? HOT 2
- The store logs a lot of errors HOT 4
- Convert a Whole Component to Web Component HOT 8
- Scoped CSS HOT 6
- lagging update glitch HOT 2
- Component properties cannot be setted until they are observed HOT 2
- `store.set()` is very slow HOT 5
- Store loads items data when iterating the list of items HOT 2
- store.record(store.record('')) bug HOT 3
- Protect Models from incorrect use HOT 9
- Passing a transform function to 'reflect:' in a property descriptor has no effect without also specifying an observer HOT 2
- Add nullable model values HOT 3
- 'Try to assert value of the '<property_name>' inside of the value function' error while passing children their properties HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hybrids.