Comments (2)
Thanks Dominik !! , I have solved the problem and learn in deep how that works, you made my day .
from hybrids.
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":
const myElement = 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';
const myElement = 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:
const MyElement = {
doSomething: (host) => (param) => {
// do something with a host
host.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).
from hybrids.
Related Issues (20)
- how to implement focus management? HOT 4
- Bug: Template is not updated when component properties change HOT 14
- How to add focus when opening a form? HOT 4
- I can't write a polymorphic model definition for GeoJson objects HOT 7
- Content is not updated when creating a model HOT 2
- Using "store([Model])" causes a TypeScript error HOT 18
- Clearing a draft causes a TypeScript error. HOT 7
- "children" fabric causes TypeScript error HOT 4
- using 'host.render()' and 'host.content()' causes a TypeScript error HOT 4
- The "store(Model, { id: value })" descriptor does not resolve "id" correctly to the model instance. HOT 3
- The "store(Model, { id:value })" descriptor does not work correctly. HOT 2
- Add a helper for assigning component properties HOT 3
- Dynamic columns not showing when render a html table HOT 4
- '"hybrids"' has no exported member named 'property'. Did you mean 'Property'? HOT 8
- Add support for "TypeScript v5" HOT 3
- I can't create an arbitrary number of nested forms: HOT 6
- Small Type Inferencing Issue with Property<E, V> HOT 3
- 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
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.