3

I have a backbone / underscore application running through require.js

I have just been doing some cross browser checking on my application and realise that my applcation is having problems loading in the templates in ie8.

within my application and within the view part when the render function is run I load and call in the correct template

I then use _.template to transform the code.

so within render i call this

 $t.$el.append($t.renderTemplate(data, templateVars));

data is the html in <%=%> format and templateVars is a list of objects which is returned data (normally json results)

the renderTemplate function looks like 

 renderTemplate: function(html, vars) {
        var compiled = _.template(html);
        console.log(compiled, "compiled");
        return compiled(vars);
 },

the problem is that in ie8 I get an error which is

Object doesn't support this property or method

this is the line its erroring out on

return render.call(this, data, _);

from this code

_.template = function(text, data, settings) {
settings = _.extend(_.templateSettings, settings);

// Compile the template source, taking care to escape characters that
// cannot be included in a string literal and then unescape them in code
// blocks.
var source = "__p+='" + text
  .replace(escaper, function(match) {
    return '\\' + escapes[match];
  })
  .replace(settings.escape || noMatch, function(match, code) {
    return "'+\n_.escape(" + unescape(code) + ")+\n'";
  })
  .replace(settings.interpolate || noMatch, function(match, code) {
    return "'+\n(" + unescape(code) + ")+\n'";
  })
  .replace(settings.evaluate || noMatch, function(match, code) {
    return "';\n" + unescape(code) + "\n;__p+='";
  }) + "';\n";

// If a variable is not specified, place data values in local scope.
if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

source = "var __p='';" +
  "var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n" +
  source + "return __p;\n";

var render = new Function(settings.variable || 'obj', '_', source);
if (data) return render(data, _);
var template = function(data) {
  return render.call(this, data, _);
};

// Provide the compiled function source as a convenience for build time
// precompilation.
template.source = 'function(' + (settings.variable || 'obj') + '){\n' +
  source + '}';

return template;
};

// Add a "chain" function, which will delegate to the wrapper.
_.chain = function(obj) {
 return _(obj).chain();
};

this is the code ff/chrome uses to convert pass back the template

// Add a "chain" function, which will delegate to the wrapper.
_.chain = function(obj) {
return _(obj).chain();
};

Underscore.js 1.3.2

this works fine in ie9, FF and chrome

can anyone help?

Prasanth A R
  • 4,046
  • 9
  • 48
  • 76
Dan
  • 1,295
  • 2
  • 22
  • 46
  • its set like - - is that ok – Dan Jul 01 '13 at 05:14
  • It can cause javascript problems, because ie8 does not know html5. I am not sure which document mode will it choose by this settings... In MSIE running of javascript code highly depends on the current document mode... I'll need further investigation, sadly I cannot test now on MSIE8... :S – inf3rno Jul 01 '13 at 05:20
  • Can you tell me exactly which line causes the problem? Or is it caused by an eval? Is there an environment for win7 x64 where I could test ie8? – inf3rno Jul 01 '13 at 05:23
  • the problem is that in ie8 when returning compiled this error is returned - Object doesn't support this property or method – Dan Jul 01 '13 at 05:25
  • 'console.log(compiled, "compiled");' .Are you sure that console.log prototype accept two parameters. – Ajeet Sinha Jul 01 '13 at 05:30
  • that line doesnt need to be there. it just shows the function - doesnt affect the fact isnt working. - http://underscorejs.org/#template – Dan Jul 01 '13 at 05:32
  • yepp, console log accepts more parameter... – inf3rno Jul 01 '13 at 05:32
  • what is in document.documentMode? – inf3rno Jul 01 '13 at 05:33
  • which version of underscore.js do you use? You can debug by which line is this problem. Just write in the source of _.template. Its a small function about 20 lines... Write console.log("X"), console.log("Y") on the begin and before the return part of the function. If the problem is in function "Y" will never displayed in console. After that you have to move one of the console.log calls. If the code is between these 2 calls, the Y will never appear. If the code is not between these 2 calls, both/neither of them are displayed. It depends on they are before or after the line causing the error. – inf3rno Jul 01 '13 at 05:40
  • ofc if console.log is working in msie8. if not use window.alert instead of that – inf3rno Jul 01 '13 at 05:40
  • By IE8 only - in IE9 or upper versions not! - use . You can check whether the doctype causing the problem, just set it to html4. If you got the same error, the doctype is ok. By wrong document mode for example dom elements does not inherit from Object.prototype, etc... – inf3rno Jul 01 '13 at 05:54
  • 1
    If you have html5 elements in you code, use http://code.google.com/p/html5shiv/ – inf3rno Jul 01 '13 at 05:57
  • Okay, I found the recommended x-ua: http://stackoverflow.com/questions/13342348/the-html5-doctype-is-not-triggering-standards-mode-in-ie8 You can use this in every msie versions, so you won't need version check. If this does not fix the problem, debug exactly in which line it is in the source of underscore.js. For that you will need to download a non minified version of underscore. After that we can say more... – inf3rno Jul 01 '13 at 06:04
  • Btw, my opinion is that you should not develop for ie9- or ie10- if you use cors. I will never do that, nobody can pay enough for it... – inf3rno Jul 01 '13 at 06:15
  • can you please add the HTML template, it looks like it contains the problem. Also please combine an example of the model.toJSON() that is passed to the template – ekeren Jul 01 '13 at 16:17

1 Answers1

3

Most likely it is because there is no support for console.log() in IE8 unless you have Dev Tools open.

See this question

Have you checked whether it works with the console.log() line commented out, or while the Dev Tools are open? The advantage of checking wit Dev Tools open is that you'll be able to see which line the error is occuring at (if it fails at all because console.log() will be available).

Community
  • 1
  • 1
dcarson
  • 2,853
  • 1
  • 25
  • 34
  • hi - its not the console.log - i have multiple of these and i also have this code.. if ($.browser.msie) { if (!window.console) window.console = {}; if (!window.console.log) window.console.log = function () { }; } – Dan Jul 01 '13 at 05:12
  • If the console.log() function is working fine, can you please tell us which line is throwing the exception by script debugging in Dev Tools? As in find which object is throwing the "doesn't support this property or method" error. – dcarson Jul 01 '13 at 06:07
  • its failing on the return compiled(vars); – Dan Jul 01 '13 at 06:38
  • 1
    Can you please amend you question to provide the HTML template code and and the templateVars object literal please. Its difficult to know without seeing them. – dcarson Jul 01 '13 at 06:51
  • have added more around question – Dan Jul 01 '13 at 07:15
  • 1
    Sorry, but we need to see *your* HTML template and *your* object literal that you are passing to the template function. Not source code from the underscore library, which we can easily look at ourselves. Without your html the object you are passing to the template, its difficult to help further. – dcarson Jul 01 '13 at 08:18