Aar*_*ght 5 javascript html5 internet-explorer-7 polyfills knockout.js
我们有一个完全由淘汰赛驱动的网站,我们需要支持所有主流浏览器,包括Internet Explorer回到IE7(不是IE6).
Chrome已经支持我们真正关心的几乎所有HTML 5功能,而且Modernizr像Champ一样处理CSS黑客攻击.但有时候我们仍然需要采用polyfill,两个值得注意的例子是placeholder属性,最近是<details>元素.
大多数polyfill是或依赖于jQuery插件,这在理论上是很好的.不幸的是,他们也往往是无效的,在处理动态加载的内容-它有一个吨,当你使用基因敲除(或任何模板引擎,真的).进一步复杂化的问题是我们使用淘汰赛作为真正的MVVM,所以在一堆JS黑客中没有好的地方可以重新加载插件(就我们的架构而言,这可能是一件好事,但令人沮丧的是面前).
我们能够使用DOMNodeInserted针对Firefox和IE9 的事件(不知道已经弃用)来实现半可靠的实现.不幸的是它在IE8中不起作用,因为传统的IE不支持它,而且似乎在这些浏览器中几乎不可能复制.onreadystatechange起初看起来很有希望但事件往往过早发生 - 即使readyState明确检查 - 并且polyfills错过了他们的目标,可以这么说.
我们尝试过的唯一一个在IE7/IE8中可靠运行的选项是使用重复超时来每50毫秒重新运行polyfill.不幸的是,它也不断地消耗了整个CPU,并且将其提高到甚至100毫秒,导致UI的延迟过于明显,因此不适合生产使用.
那么:是否有任何可靠的方法将传统的polyfill技术与动态内容和模板引擎(如knockoutjs)相结合,哪些适用于每个主流浏览器至少IE7？
(FWIW,我们最终使用knockout的afterRender绑定管理了一个解决方法,但是那种"poly"取出了"polyfill".我希望能找到一些我们可以写一次然后忘掉的东西.)
我解决同样问题的方法是将我的大部分 jQuery 插件和一般行为包装在敲除绑定中（http://knockoutjs.com/documentation/custom-bindings.html）。例如，我在每个输入上使用了一个占位符“绑定”，这样<input data-bind="placeholder:'Some Placeholder Text'"/>要么简单地设置placeholder属性，要么根据需要进行一些 IE hack。
更广泛的解决方案是增强敲除绑定提供程序（http://www.knockmeout.net/2011/09/ko-13-preview-part-2-custom-binding.html）。绑定提供者是遍历 DOM（加载时和动态加载时）并识别绑定的东西。默认情况下，这本质上意味着它只是查找数据绑定属性和 ko 注释，但您可以更改它以查找占位符、日期或数字输入的输入类型等属性，并添加 IE 黑客。