Issue with LightSwitch restyling custom control with delayed rendering

Question

I was playing around with a LightSwitch custom control using the simple code:

myapp.Facility_Details.ScreenContent_render = function (element, contentItem) {
    $(element).append("<ul><li><label><input type='checkbox'/><span>Test</span></li></ul>");
}

And I notice LightSwitch makes a valiant effort to rewrite my HTML after I render it, adding it's own control styling classes to the HTML and doing a bit of re-organizing. I figured I could live with this & just get used to what it did, but then I hit a worse issue when I added some AJAX to the mix. When I do my actual rendering in the done method of a Promise the post-processing doesn't happen.

EG:

myapp.Facility_Details.ScreenContent_render = function (element, contentItem) {
  contentItem.data.getCommodityGroups().done(function (data) {
    $(element).append("<ul><li><label><input type='checkbox'/><span>Test</span></li></ul>");
  });
}

Renders totally differently (Doesn't edit the HTML). I could live with this too, but then if I browse away from this page & back to it then it swaps over to the first display... I tried returning the Promise from render thinking maybe that'd let it wait for me to be done, but no dice.

Does anyone know how can I either:

a) Prevent this reprocessing so I get the HTML I write every time.

b) Trigger this reprocessing explicitly so I can make sure it happens after I render inside a Promise.

Answer 1

This restyling is coming from jQuery Mobile. Turns out the solution is to trigger a create event after editing the HTML (EG: $(element).trigger('create');) to tell jQuery Mobile there's new HTML to style.

Another approach is to add data-role='none' so jQuery Mobile leaves your HTML alone. I'll probably mostly use the latter, but it's good to know both exist.

Actually found the answer over at another StackOverflow question - the trick was knowing it was jQuery Mobile that mattered which is a lot easier to find info for than LightSwitch itself.

Answer 2

It is jQuery doing the work so wrap into jQuery object before appending it perhaps? Look at the samples down the page here MSDN article.