Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

BBUI with databinding, force re-render

I'm using bbui with knockout to render a databound imagelist. When I first call pushscreen, the bound data is empty while a network request takes place. Once complete, the knockout bindings update and the screen is rendered. However, by this stage, pushscreen has already completed and as the list had no data initially, the newly updated screen has none of the bbui control styling applied. Navigating away and coming back fixes the issue.

 

Is there public method on the screen object which I can call to force a re-render once my data-bound objects have been populated and the UI been re-generated as a result?

Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

Re: BBUI with databinding, force re-render

[ Edited ]

originally incorrectly posted in webworks contributions, sry...

Developer
nunodonato
Posts: 313
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha

Re: BBUI with databinding, force re-render

Hi!

if you want to display data when the screen is loading, you should place those calls on the "onscreenready" function of bb.init. ondomload will take place after the screen has already loaded.

 

If you want to re-render after the screen is loaded, you can call the refresh() method of the list. There are examples of both in GitHub

Nuno
theBBthing.wordpress.com - my BlackBerry development blog: news, tips and tutorials
bitoutsidethebox.com - re-imagining digital solutions


Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

Re: BBUI with databinding, force re-render

Hi Nuno, thanks for the repsonse.

 

Unless I'm mistaken, refresh on the list takes an array of items and inserts them into the list, it doesn't refresh the existing render (well it doesn't when I use it). I already have my items in the list however they were inserted after the dom was ready and therefore aren't being styled, e.g.

 

<div data-bb-type="image-list" data-bind="foreach: myitems">
  <div data-bb-type="item" data-bind="text : title"></div>
</div>

 

The data-bind attribute is from knockout.js. Once 'myitems' has been populated (this is async so after onscreenready/ondomload), the child div's of data-bb-type="item" are generated, one for each child on the myitems array. These aren't styled as imagelist items as a result of them happening way after the page render is complete. One alternative is to remove the databinding and generate the child items in js and call refresh as the docs suggest, passing the new set of items, however I was hoping there was simple way to force the re-style.

 

Thanks

 

Paul

Developer
nunodonato
Posts: 313
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha

Re: BBUI with databinding, force re-render

Hi again,


Correct. Either you get the data before the dom gets loaded (onscreenready), and so the styling is done in time, or you have to pass the item list to the refresh function.

Maybe there is a way to also refresh using what is already there... but you have to dive into bbui.js to see how it is done :smileyhappy:

Nuno
theBBthing.wordpress.com - my BlackBerry development blog: news, tips and tutorials
bitoutsidethebox.com - re-imagining digital solutions


Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

Re: BBUI with databinding, force re-render

As the operation to get the data is an XHR call ondomready isn't suitable as the method will return immediately. However I've found a workaround after peering into bbui.js. You can re-style any screen by calling 

 

bb.style(screen)

 

The only caveat is that any elements that were in the screen when it was first rendered and therefore were correctly styled will be duplicated everytime you call this method. I get around this by only inserting the bbui elements into the screen once the xhr is complete.

 

hope this helps anyone else who has the same issue.