BorisMoore / jquery-tmpl

The original official jQuery Templates plugin. This project was maintained by the jQuery team as an official jQuery plugin. It is no longer in active development, and has been superseded by JsRender.
3.23k stars 1.01k forks source link

IE templates using HTML5 tags #36

Open andy-clusta opened 13 years ago

andy-clusta commented 13 years ago

Hi

Guidance on how to integrate a solution like innerShiv into jquery-templates would be very helpful, as IE does not support insertion of HTML5 tags, even when using the document.createElement('section') fix for tags on the initial HTML page.

Andy

BorisMoore commented 13 years ago

Closing this issue for now. HTML5 structural elements in current browsers which have no built-in support for them is not a target scenario for jquery-tmpl at this point. (We are currently in Beta and for our first release have many other target scenarios we need to address). That said, a version of innerShiv or similar that works with templates may be possible. But it cannot be supported by specific code in the official plugin...

andy-clusta commented 13 years ago

I have got innerShiv to work with jquery-templ by adding innerShiv to the private function named build. Refactoring the jQuery( middle ) call on line 296 to allow this to be easily overridden would be very helpful.

Line 296: frag = jQuery( innerShiv ( middle ) ).get();

andy-clusta commented 13 years ago

eg. a PreInject or OnInjecting method which could be overloaded, to add innerShiv as required.

BorisMoore commented 13 years ago

Thanks. I'll consider that if we do significant iterations on that part of the code.

KrofDrakula commented 13 years ago

+1, in HTML5 apps, this is a blocker issue, since no widgets can use HTML5 elements in their templates; the fix by andy-clusta did help, but would love to see this integrated upstream.

BorisMoore commented 13 years ago

I've reopened this issue, for investigation. Not sure how soon we will be able to address it though...

KrofDrakula commented 13 years ago

I've done some more testing on a live example; seems the simple wrapping with innershiv doesn't work correctly, since instead of DOM elements, it returns a document fragment that botches up rendering. I didn't have time to investigate further, but something to help with the resolution.

andy-clusta commented 13 years ago

My latest approach has been to patch jQuery itself, rather than jQuery plugins individually. The following code works fairly reasonably for my use cases. Crucially, it ensures scripts returned in a partial are also evaluated, but after dom insertion.

var init = $.fn.init;
var html = $.fn.html;

// used by Jquery Templates
// tests to see if html passed to constructor
$.fn.init = function (selector, context) {
    if ($.browser.msie && typeof selector == 'string' && selector.indexOf('>') != -1 && selector.indexOf('<') != -1) {
        return new init(innerShiv(selector, false));
    }

    return new init(selector, context);
};

// used by Jquery Unobtrusive Ajax in ASP.NET MVC
// only matches <script></script> tags, without @src and @type
$.fn.html = function (value) {
    if ($.browser.msie && value != null) {
        var scriptsRegex = new RegExp('<script>([\\w\\W]*)</script>', 'gim');
        var scripts = value.match(scriptsRegex);
        var el = html.apply(this, [innerShiv(value, false)]);

        for (var i in scripts) {
            var js = scriptsRegex.exec(scripts[i]);
            if(js != null)
                $.globalEval(js[0]);
        }

        return el;
    }

    return html.apply(this, arguments);
};
KrofDrakula commented 13 years ago

@andy-clusta: I've modified your script a bit (added function name to avoid having the var declarations) and added innershiv to the file: https://gist.github.com/822134

tehnorm commented 13 years ago

if it matters +1 for this fix being worked in. We are using HTML5 and are experiencing IE's "challenges" with HTML5. Also - thanks again for jquery-tmpl - great stuff!!

Akkuma commented 13 years ago

@KrofDrakula & @andy-clusta I've now made a jQuery 1.5+ compatible version, which integrates the innerShiv directly into the function to remove it from the global namespace.

https://gist.github.com/887560

rosshadden commented 13 years ago

Is there any way the tmpl plugin can be fixed to correct this, so no additional code is required? This is hands-down an issue with jquery-tmpl, so modifying jQuery and/or the shiv are not the best approaches.

rdworth commented 13 years ago

Thanks for taking the time to submit this issue. Just wanted to let you know this plugin is no longer being actively developed or maintained by the jQuery team. See README for more info.