5

我们有一个几乎完全淘汰淘汰的网站，我们需要支持所有主流浏览器，包括回到 IE7（而不是 IE6）的 Internet Explorer。

Chrome 已经支持几乎所有我们真正关心的 HTML 5 功能，Modernizr 像冠军一样处理 CSS hack。但有时我们仍然不得不求助于 polyfill，两个值得注意的例子是placeholder属性和最近的<details>元素。

大多数 polyfill 都是或依赖于 jQuery 插件，这在理论上很好。不幸的是，它们在处理动态加载的内容方面也往往效率低下——当您使用淘汰赛（或任何模板引擎，真的）时，这种情况很多。更复杂的事情是我们使用淘汰赛作为真正的 MVVM，所以在一堆 JS hack 中没有合适的地方来重新加载插件（就我们的架构而言，这可能是一件好事，但令人沮丧的是正面）。

DOMNodeInserted我们能够为 Firefox 和 IE9 使用事件（我知道已弃用）提出了一个半可靠的实现。不幸的是，它在 IE8 中不起作用，因为旧版 IE 不支持它，而且在那些浏览器中复制似乎几乎不可能。onreadystatechange一开始似乎很有希望，但该事件往往触发得太早 - 即使readyState已明确检查 - 并且 polyfills 可以说没有达到目标。

我们尝试过的唯一在 IE7/IE8 中真正可靠工作的选项是使用重复超时以每 50 毫秒重新运行一次 polyfill。不幸的是，这也不断消耗整个 CPU，甚至将其提高到 100 毫秒都会导致 UI 延迟太明显，因此不太适合生产使用。

那么：是否有任何可靠的方法可以将传统的 polyfill 技术与动态内容和模板引擎（如 knockoutjs）相结合，至少在 IE7 等主流浏览器中都可以使用？

（FWIW，我们最终确实使用淘汰赛的afterRender绑定管理了一个解决方法，但是这种方法将“poly”从“polyfill”中取出。我希望我们可以写一次然后忘记的东西。）

4

1 回答 1

2

我解决相同问题的方法是将我的大部分 jQuery 插件和一般行为包装在敲除绑定 ( http://knockoutjs.com/documentation/custom-bindings.html ) 中。因此，例如，我有一个占位符“绑定”，我在每个输入上都使用了这样的占位符“绑定”，<input data-bind="placeholder:'Some Placeholder Text'"/>它要么简单地设置placeholder属性，要么根据需要进行一些 IE 破解。

更广泛的解决方案是增加敲除绑定提供程序（http://www.knockmeout.net/2011/09/ko-13-preview-part-2-custom-binding.html）。绑定提供者是遍历 DOM（加载时和动态加载时）并识别绑定的东西。默认情况下，这实际上意味着它只是在寻找数据绑定属性和 ko 注释，但您可以更改它以查找占位符、日期或数字输入的输入类型等属性，并添加您的 IE hack。

于 2013-03-04T00:20:13.910 回答