Comments (1)
It is possible to pass down function to the custom element created by the hybrids. However, I would recommend to stick to the platform and use DOM events instead.
First of all, there are two ways to structure related components - you can render children inside of the parent component - in render
property, like this:
const TodoList = {
render: () => html`
<todo-item></todo-item>
<todo-item></todo-item>
`,
};
Then in your other part of the app you are using <todo-list>
where <todo-item>
is used behind the scene.
The second way allows composing parent and children using the distribution:
const AppWrapper = {
render: () => html`
<todo-list>
<todo-item></todo-item>
<todo-item></todo-item>
</todo-list>
`,
}
The question is here, where do you want to have logic, which is resposible for processing input items for the list. In the first way, the <todo-item>
is just for convience - it could be a <div>
with styling, so then you don't have communication between different custom elements. In the second example <todo-list>
is rather a UI wrapper with some styling etc, for <todo-item>
s.
How you can then use DOM events? If your <todo-item>
has delete button - you can attach event listener to click action, and dispatch another custom event for it:
import { dispatch, html } from 'hybrids';
function delete(host) {
dispatch(host, 'todo-item-delete', { detail: host.data.id });
}
const TodoItem = {
data: null,
render: ({ data }) => html`
<div>${data.msg}</div>
<button onclick=${delete}>delete item</button>
`,
};
In above example <todo-item>
element dispatches todo-item-delete
event when a user clicks delete item button.
You can then listen to that event in your parent component and remove item from your list:
function deleteItem(host, event) {
const itemId = event.detail;
host.items = ...
}
const AppWrapper = {
render: () => html`
<todo-list>
<todo-item ontodo-item-delete=${deleteItem}></todo-item>
<todo-item></todo-item>
</todo-list>
`,
}
If you are using the first method you can still use events and add one to your <todo-item>
element.
At last, if you really want to pass function you can define your property as a undefined
(omit transforming value of the property) and use it on some event:
const TodoItem = {
deleteCallback: undefined,
render: ({ data, deleteCallback }) => html`
<div>${data.msg}</div>
<button onclick=${deleteCallback}>delete item</button>
`,
};
And then:
function deleteItem() {...}
const AppWrapper = {
render: () => html`
<todo-list>
<todo-item deleteCallback=${deleteItem}></todo-item>
<todo-item></todo-item>
</todo-list>
`,
}
from hybrids.
Related Issues (20)
- Storage-first/storage-only option for [store.connect] HOT 10
- React integration - Error while unmounting the component HOT 2
- Try render a table but encounter a problem HOT 3
- about destructured host parameter in render function HOT 2
- I'm trying to load a model on button click. Component does not update after loading model HOT 5
- A storage without an identifier loads data even before assigning an identifier HOT 2
- Starter / template repository ? HOT 2
- How do I tap into `connected` / `disconnected` lifecycle methods ? HOT 2
- Confusing documentation on "class" attribute HOT 3
- An error occurs when saving a Draft HOT 9
- store.error() Guard does not work with enumerable Models loaded from asynchronous storage HOT 2
- A draft model instance with an empty ID returns an error when editing HOT 6
- When saving a model, linked models cannot be updated HOT 2
- Suggestion: Develop a solution that allows you to use a single component to create, edit and present a model HOT 5
- Cannot define default nested model HOT 3
- how to create a component method HOT 4
- 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
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.