# Thursday, 19 April 2012
« SelfSSL on IIS 7 | Main | Mercurial for a small team series–Mercur... »

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! Smile

Posted 04.19.2012  #    Comments [0]  |