Custom component inside a ListView: how to manage multiple custom parameters
See original GitHub issueAs far as I know while learning NS (core) the most robust way to build components that work correctly with ListView, is to write them in full JS (see also #6042), but… there are more problems.
I need to pass more than one custom parameters to the component:
<ListView items="{{ items }}" .... >
<ListView.itemTemplates>
<template key="NEW_MERCHANT">
...
<MyComp:MyComp id="{{ itemId }}" template="tmpl1" context="{{ $value }}" />
...
</template>
...
So in JS side each custom parameter is handled through a custom class property (get/set) that manages a correspondent variable, for example:
_id: string;
get id() {
return this._id;
}
set id(value) {
this._id = value;
this.render();
}
Of course the component build its view when ALL parameters are received consistently. Unfortunately parameters are received separately (AFAIK) and so it’s required to check, before to build the view (through render() method), that all parameters have been received! This is not elegant, it would be better to receive all parameters in block, possibly in the constructor, don’t know if there is another way… anyway…
There are more problems: when the view is recycled, component is recalled, but at this point internal parameters values can be still set respect to the previous place and that produces an inconsistent view. To prevent this problem i set undefined all properties after the view was build. But sometimes it may happen that NOT ALL custom parameters are passed and that also produce an inconsistent view, no workaround right now.
Conclusion, it seems to me very, very farraginous at least… so my questions are:
Am I doing right with this stuff? Is there a better way to make such kind of components or is it the only way ?
Other than the official doc I’ve read various references in the net about building component but I found nothing for this scenario.
Thanks a lot for any suggestion or reference.
Issue Analytics
- State:
- Created 5 years ago
- Comments:15 (7 by maintainers)
@drmistral marking the above issues as bug in https://github.com/NativeScript/NativeScript/issues/6042 and closing this one as related. Will post any related info in the linked issue.
@NickIliev Great! At the moment best solution i found for this issue is to pass all needed parameters as single json object (see above), and write comps in full-js to prevent #6042.