[ 11 posts ] Go to page 1, 2 Next

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile
Tags:

YUI handlebars and IE8 IE7 compatibility

Post Posted: Mon Apr 02, 2012 3:11 pm
+0-
Hi everyone,

I can't get a simple handlebars example to work when I change the compatibility mode of IE to IE8 or IE7. it seems that the handlebars script tag 'text/x-handlebars-template' returns an empty string when Y.one('#list-template').get('text') is called. In IE9, it works fine. Am I doing something wrong?

Thanks.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script src="http://yui.yahooapis.com/3.5.0pre5/build/yui/yui-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        YUI().use('handlebars', 'node-base', function (Y) {
            // Extract the template string and compile it into a reusable function.
            var source   = Y.one('#list-template').get('text'),
                    template = Y.Handlebars.compile(source),
                    html;

            // Render the template to HTML using the specified data.
            html = template({
                items: [
                    {name: 'pie', url: 'http://pieisgood.org/'},
                    {name: 'mountain dew', url: 'http://www.mountaindew.com/'},
                    {name: 'kittens', url: 'http://www.flickr.com/search/?q=kittens'},
                    {name: 'rainbows', url: 'http://www.youtube.com/watch?v=OQSNhk5ICTI'}
                ]
            });

            // Append the rendered template to the page.
            Y.one('body').append(html);
        });
    </script>
</head>
<body>
<script id="list-template" type="text/x-handlebars-template">
    <p>YUI is brought to you by:</p>

    <ul>
        {{#items}}
        <li><a href="{{url}}">{{name}}</a></li>
        {{/items}}
    </ul>
</script>
</body>
</html>

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile
Tags:

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Mon Apr 02, 2012 3:35 pm
+0-
So if I do
Code:
document.getElementById("list-template").innerHTML
Instead of use YUI to grab the contents of the template, then it works. I guess this might be a feature enhancement for the Y.Node module?

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Tue Apr 03, 2012 7:47 am
+0-
Have you tried waiting for the domready event with Y.on('domready', fn)?

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile
Tags:

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Wed Apr 04, 2012 9:02 am
+0-
Hi Juan,

Thank you for your suggestion. It's exactly what I needed. :)

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile
Tags:

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Wed Apr 04, 2012 11:13 am
+0-
Scratch that. I spoke too soon! I forgot to change the call from using document.getElementById() to Y.one().get('text').

Executing the logic within the 'domready' callback does not fix the issue.

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Wed Apr 04, 2012 11:55 am
+0-
Ok, I looked up the code. node.get('text') uses textContent or innerText. I don't have IE8 around at the moment so I can't check, but it's possible IE < 9 doesn't have innerText for script tags. Have you tried node.getContent() or node.get('innerHTML')?

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Wed Apr 04, 2012 12:42 pm
+0-
Nice! Thanks a bunch!

Using the .getHTML() or .get('innerHTML') works fine across the IE versions. Guess you are correct about IE7 and IE8 not supporting .get('text').

.getContent() is deprecated so I wont use that one.

Thank you again!

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Wed Apr 04, 2012 1:02 pm
+0-
:O I didn't know that!

Daniel Ji

  • Username: humblepie
  • Joined: Tue Feb 28, 2012 10:30 am
  • Posts: 147
  • GitHub: humblepie
  • Gists: humblepie
  • Offline
  • Profile

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Wed Apr 04, 2012 1:18 pm
+0-
Oh I just double checked the API doc. In stage, it's for YUI 3.5 pre5 that it has been deprecated :) For YUI 3.4.1, .getContent() is still good.

Marc

YUI Contributor

  • Offline
  • Profile

Re: YUI handlebars and IE8 IE7 compatibility

Post Posted: Thu Oct 25, 2012 2:59 pm
+0-
I have the same problem when I try to retrieve script content in a document fragment.

var script = content.all('script').toFrag().getHTML();

returns undefined.

Hmm,
var script = content.all('script').getHTML();
seems to work although it returns an array
  [ 11 posts ] Go to page 1, 2 Next
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum