question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom component inside a ListView: how to manage multiple custom parameters

See original GitHub issue

As 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:closed
  • Created 5 years ago
  • Comments:15 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
NickIlievcommented, Jul 25, 2018

@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.

1reaction
drmistralcommented, Jul 25, 2018

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

JavaFX ListView using custom component but with multiple ...
I was able to make a list view using custom components loaded with fxml but it seems like we can't make multiple columns....
Read more >
Android Beginner Tutorial #8 - Custom ListView Adapter For ...
Android Beginner Tutorial #8 - Custom ListView Adapter For Displaying Multiple ColumnsBy the end of this video you will know how to:1) ...
Read more >
Android ListView with Custom Adapter Example Tutorial
In this tutorial we'll use a CustomAdapter that populates the custom rows of the Android ListView with an ArrayList .
Read more >
menu parameters - Params in Custom Component List View
It looks like you are trying to get the menu parameters for your current active menu. Try the following code, this hasn't been...
Read more >
Custom View Components | Android Developers
You could combine a group of View components into a new single component, perhaps to make something like a ComboBox (a combination of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found