1 min read

Kendo UI MVVM模板在IE8下渲染问题

根据Kendo UI的文档声明1,它支持IE7+。

但我在IE8下使用它的MVVM2时,却发现数据绑定后渲染不完整。Firefox、Google Chrome下均正常。

代码大概如下:

<div id="example" data-template="category-template" data-bind="source: blog"></div>

<script id="category-template" type="text/x-kendo-template"><!--分类模板-->
  <div>
    <h2 data-bind="text: category"></h2>
    <div data-bind="source: posts" data-template="post-template"></div>
  </div>
</script>

<script id="post-template" type="text/x-kendo-template">
  <div>
    <h2 data-bind="text: title"></h2>
    <div data-bind="text: content"></div>
  </div>
</script>

<script type="text/javascript">
var viewModel = kendo.observable({ 
  blog: [ 
    { category: "随便说说", posts: [{"title": "陈三的博客", "content": "这是一个长草的地方"}, {"title": "夏日来临", "content": "要去哪里吗"}] }, 
    { category: "前端开发", posts: [{"title": "JavaScript闭包", "content": "闭包是什么意思"}, {"title": "夏日来临", "content": "要去哪里吗"}]}
     ]
    });
    kendo.bind($("#example"), viewModel);
</script>

渲染的结果可以见jsbin链接

对比图如下:

kendo ui under firefox and ie8

IE8下,渲染不完整,某些数据不见了。

最后找出的原因是代码中的注释:

<!--分类模板-->

因为我把它写在Kendo的自定义script标签里,于是IE8下就出问题,移出去后就恢复正常。这是一个非常细微却又让人觉得非常坑爹的问题。

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo