{index} in BlockDom #25
-
|
Hi, Please consider the following example (borrowed from your tutorial) You are using a Based on const counter = createBlock(`
<div>
<p>Value: <bd-placeholder-0/></p>
<button bd-placeholder-1="click">Increment</button>
</div>`);What will happen if we use just |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Good question. This comes from the way the So, in practice, it's not obvious how to do it differently. Option 1: use a different index per type of update. This can work, but then we need to provide all dynamic data in different lists. This could look like this: const block = createBlock(`<div block-attribute-0="hello" block-handler-0="click"><block-text-0/></div>`);
// 5 arguments are a list for attributes, a list for handlers, a list for texts, a list for refs, a list for children
const tree = block([valueForAttribute], [valueForHandler], [text0], [], []);or maybe like this: const block = createBlock(`<div block-attribute-0="hello" block-handler-0="click"><block-text-0/></div>`);
// an object { attributes: [], handlers: [], texts: [], children: [], refs: [] }
const tree = block({ attributes: [valueForAttribute], handlers: [valueForHandler], texts: [text0]});It does not seem particularly better to me. Another way to improve that is to use a unique index, for data and for children. There is an issue to do that, but as I worked on it, I could not find a way to do it without taking a performance hit, because they are different kind of things, and the internal code is not very similar. Now, for your second question, I want to say that the index is not the only thing important: |
Beta Was this translation helpful? Give feedback.
Good question.
This comes from the way the
createBlockfunction works: it makes a block that takes two arguments,dataandchildren.childrenare for sub blocks, anddatafor any kind of dynamic thing in the block. More than one kind of data is possible: event handler, dynamic text, dynamic attribute, or dynamic refs. But thecreateBlockfunction needs to know which kind of data will be given, because it compiles small optimized function that targets one specific type of update.So, in practice, it's not obvious how to do it differently.
Option 1: use a different index per type of update. This can work, but then we need to provide all dynamic data in different lists. This could look like …