01-16-2013 12:00 PM
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?
01-16-2013 01:26 PM
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
01-16-2013 02:01 PM
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>
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.
01-16-2013 02:11 PM
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
01-16-2013 05:06 PM
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
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.