Expose public enhance method on mobile.page (solves issue 1561)

[arsduo]

Hi,

I've been running into issues with dynamically-generated content, since elements added after page load (for instance, Javascript templating + Ajax results = new list) don't get enhanced.

Exposing the enhancement code in mobile.page meets this need -- you can call pageObject.page("enhance") and any new content gets enhanced. In my (limited) experience this seems to work without downsides. (I looked at the unit tests with an eye toward updating them, but the jquery.mobile.page.js isn't immediately clear to me.)

One potential issue is that using page("enhance") requires knowing the relevant page object, which is pretty easy to get -- $("#newContent").closest(":jqmData(role='page')") -- but is not super friendly to the casual developer. Creating a second method like $.mobile.enhance(selector), which finds the nearest page to the selector and enhances it, might be a better method; I'm happy to do that if this change is accepted.

Hope this is useful!

Alex

[StevenBlack]

I like this idea, @arsduo.

[flavaflav]

+1 TY!!!

[arsduo]

The more I use this, the more it seems like there should also be a high-level convenience function for enhancing an arbitrary object -- something like:

$.mobile.enhance = function(obj) {
  // we call page().page("enhance") in case the page hasn't yet been initialized (new content)
  // note that we don't need explicit checks for null/undefined obj or obj not in a page
  // (jQuery handles those cases for us)
  $(obj).closest(":jqmData(role=page)").page().page("enhance");
}

Glad it's useful!

[arsduo]

Ignore the revert, sorry. I misread a pull request as an issue and coded a fix myself; I reverted it so @flavaflav gets due credit :)

[scottjehl]

Great idea, thanks for the pull! There's one part that seems a little agressive here, and that's rerunning some of the init code on elements that have already been enhanced (headers and footers in particular).

In the decoupled-widgets branch, we've got something similar set up now that I'd love to have you take a look at. The first change was to make all widgets self-init on pagecreate (or pagebeforecreate), removing all the tight coupling in the page plugin (and enabling us to more easily move to a download builder later on). With that in place, I added another event binding for an "enhance" event, like you've got above. Instead of being tied to the page plugin, it's just an event that can be triggered on any element to enhance its child components.

The 2 commits for this are here: df92fbd

It'd work like this:
$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );

Thoughts?

[scottjehl]

Since the branch has been started to address this issue, and it works independently of the page plugin, we've moved this to the feature requests page in the wiki. We'll plan to land the "enhance" event for HTML fragments soon.

[arsduo]

Hey Scott,

Thanks for the info! That sounds like a better idea than my approach, which was admittedly a bit blunt. I'll take a look at and try out the branch soon and let you know if I have any thoughts.

I was initially going to suggest having a wrapper method so you could just call .enhance(), but the nice part of using trigger is that it's harmless in non-mobile environments -- being able to share code more directly is probably worth the slightly less convenient syntax.

Thanks!

Alex

[scottjehl]

Thanks Alex,
I think we'll likely add a helper method to $.fn to match the event trigger if we implement this.

[arsduo]

Hey Scott,

Do you have a sense yet of when the enhance event will be available in an official release? (For the moment I've manually merged 1.0b1 and decoupled-widgets.)

Thanks!

Alex