Custom UI component woes


#1

I’m trying to create a custom UI component that will take the keys from and associative array and populate a grid. This has taken a huge amount of trial-and-error, as I really can’t find much documentation on this topic (other than an appendix in the first version of The NativeScript Book - it was somehow removed from the second version.)

So, what I want is something like,

<gridTable: gridTable keys="{{ data }}" />

Where data is something like:

data = {
 “Fri”: “Friday”, 
“Sat”: “Saturday”,
“Sun”: Sunday}

And end up with a GridLayout like:

Fri Sat Sun

Here’s my assumptions so far:

  1. I have to use the onLoaded event of the parent container to populate the GridLayout, because the bindingContext isn’t available at constructor time

  2. I can add my onLoaded handler via this.onLoaded = exports.onLoaded in my constructor

But, when doing so, I receive the error, “Error: super.Loaded not called… ”

So, what to do? I can’t find any documentation on that particular error. Any help or pointers would be most welcome. Oh, this is a JavaScript project (i.e., no TypeScript, Angular, or Vue).


#2

Are you calling super.Loaded?
Would you mind to share some code?


#3

@manojdcoder - yeah, that’s kind of an obvious one :slight_smile:

When I add a call to super.Loaded I get: System.err: > 'super' keyword unexpected here

I’ll clean up my code and prepare a playground.

Thanks, as always…


#4

Here’s the playground I created: https://play.nativescript.org/?template=play-js&id=14Hior&v=4

I’m still just guessing that this is the right approach to use the data bound values to populate the GridLayout. I realize that I could do all this in the page’s Loaded event, but the whole point here is to do this within the custom component code.


#5

Here you go

In the original code, You didn’t have reference for _super (the parent chain), super is ES6 special operator. I guess you confused them both.


#6

@manojdcoder - your awesomeness continues to impress me. Thanks so much!

Yes, I wasn’t sure how to access _super from the onLoaded function, but you solved that by including the function where _super is defined. Makes perfect sense, and works perfectly, too.