I’m developing an ASP.Net MVC application with Knockout 2.0/2.1rc. I’m using modernizr (2.5.3) and css3pie (1.0 beta 5) to get CSS3 and HTML5 support on as many browsers as I can.
On a particular view I am using imageless add/delete buttons. I’m using Knockout to dynamically add and remove items from two tables.
I had to use css3pie to help make the buttons work in IE 6-8 with this line for the add button:
/* no fix currently for radial gradient in IE6-8... using linear instead.*/ -pie-background: linear-gradient(-90deg, #1b9918,#1b9918 65%,transparent 65%, transparent);
and for the delete:
-pie-background: linear-gradient(-90deg, #da7d83, #da7d83 50%, #ca444e 50%, #ca444e);
When I apply the binding in KO (.applybinding), the buttons disappeared in IE 8. At first I thought something was wrong in modernizr but after some testing I realized it was only IE 8 that was failing. That got me thinking about css3Pie. After some searching around on the internet I found this post. The final response gave me my answer:
I have the same problem with a native ko templates, if I use "foreach" without a container element. Also, I was trying to use PIE.js instead of PIE.htc - but without success. For templates like data-bind="template: { name: 'itemTmpl', foreach: items }" css3pie works fine. Try to refactor templates using a container element. May be it is workaround solution.
I was using an anonymous/inline template:
When I changed the code to use a named template:
...
IE6-8 began working again.
According to the forum post, this may be an issue with KO 2.0. I didn’t try it on an older version of KO but I did with KO 2.1rc and had the same results.
Happy Coding! 