Web and WebWorks Development

[nathanpc]

I'm trying to append a item to a bbUI Image List using the following code:

list = {
  createItem: function (fragment, image, title, desc, click) {
    var item = document.createElement("div");
    
    item.setAttribute("data-bb-type", "item");
    item.setAttribute("data-bb-title", title);
    item.setAttribute("data-bb-img", image);
    item.setAttribute("onclick", click);
    item.innerHTML = desc;
    
    fragment.appendChild(item);
  }
}

bb.init({
  ondomready: function (element, id) {
    if (id == "main") {
      var fragment = document.createDocumentFragment();

      list.createItem(fragment, "images/test.png", "Testing Title", "Here will go the description.", "alert('this was clicked')");
        
      document.getElementById("list-container").appendChild(fragment);
      $("#list-container").css("display", "block");
    }
  }
});

Maybe it's inserting the item after bbUI got stylized all the screen, but it doesn't get styled neither the HTML was edited by bbUI to turn it into a list item, added all those styling elements and changing the structure of the <div> (if compared with the one I tested by just putting it on the HTML source file).

Any ideas on how to do this correctly so it gets styled by bbUI?

[nathanpc]

I managed to learn how to do it and wrote a tutorial about it so everyone can understand how to do this Using bbUI's onscreenready and ondomready to Dynamically Change Your HTML.