ie8下使用knockoutjs遇到的一个模板异常

ViewModel中有一个数组,代码大概如下:

function ReportViewModel(){
    var self = this;
    self.extendedProperties = ko.observableArray([]);
    ...
}

在从服务端获取到数据之后,使用下面的代码更新模型:

for (var index in json.extendProperties) {
    reportViewModel.extendedProperties.push(extendProperties[index]);
}

knockout会根据extendedProperties使用我定义好的模板生成html,模板代码及绑定代码大概如下:

<script type="text/html" id="template-report-extendproperty">
    <p class="the-week"><b data-bind="text:name"></b></p>
     ......
</script>
 <!--使用汇报模板-->
 <div class="write-report clearfix" data-bind="template: { name: ‘template-report-extendproperty‘, afterRender: extendedPropertyRendered,foreach: extendedProperties }">
</div> 

上述代码在ie9及以上,chrome下运行良好。但在ie8下会提示“name为undefined”。

刚开始怀疑是ko在ie8下的bug,翻了下文档没有特殊说明,谷歌也没找到类似的问题。

然后怀疑是不是在往reportViewModel.extendedProperties里面push数据的时候,出现了一些脏数据。问了验证这个问题,把更新ViewModel的代码修改如下:

for (var index in json.extendProperties) {
    var extendProperty = json.extendProperties[index];
    consjole.log(index);
    console.log(extendProperty);
    createReportViewModel.extendedProperties.push(new ExtendProperty(extendProperty));
}

于是在控制台得到如下输出:

奶奶的,遍历完数组之后,把Array的prototype中的indexOf也给遍历出来了。看来是for in语法在ie8下不大好使,还是老实用$.each吧。更新ViewModel的代码最终修改如下:

$.each(json.extendProperties, function(i, n) {
    reportViewModel.extendedProperties.push(new ExtendProperty(n));
});
时间: 2024-10-08 15:01:33

ie8下使用knockoutjs遇到的一个模板异常的相关文章

angular在ie8下的一个bug

昨天拿项目在ie8下测试,发现不少bug,其中有一个bug让我很不解,报了一个thead开头的bug,因为已经切回到linux下了,我就不报具体是什么bug了,鼓捣了半天,发现引用angular的应用中,table元素在ie8或者7下不能缺少thead,即便是空,也得加上空的thead. angular在ie8下的一个bug,布布扣,bubuko.com

IE8下div中2个按钮只显示一个

IE8下div中2个按钮只显示一个,代码如下: <div id="adviceType" style="display: none;" > <select name="adviceTypeOne" id="adviceTypeOne" class="shortselect" > <option value="-1">--请选择--</option

IE8下div中2个button仅仅显示一个

IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" > <select name="adviceTypeOne" id="adviceTypeOne" class="shortselect" > <option value="-1">--请选择--<

IE8下JQuery clone 出的select元素使用append添加option异常解决记录

遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone, HTML代码中包括select标签, 在克隆之后需要对select进行添加option. 在firefox和chrome浏览器上都没有问题,在IE10下也没有问题, 但是在IE8下就出现问题,使用append添加option后,IE8上就显示不出来新添加option. 示例代码如下,对于clone出的第二个select有问题,但是通过打印,发现添加后的option数目是正确的3个. 这个就太令人费解了

Jquery ajax传递xml方式在ie8下兼容问题

要写的东西是一个工作日志页面,要求不能分页,一天写入一条数据.考虑到服务器的性能问题,使用一次性全从数据库中读出数据在方法,如果时间长了,页面在加载的时候会很慢,而且会造成浪费.所以我采用ajax技术,一次读3条数据,随着滚动条滑动加载.这样就能很好的降低服务器的压力,虽然项目不大. 项目提交的时候才发现,我写的工作日志页面居然在ie8下不能正常显示.按理来说,Jquery应该已经帮我解决了ajax创建xmlDOM时的兼容性的问题,仔细排查了以后发现是ie8对xml解析的问题. 找了资料后解决办

IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决的方法

今天在调试一个页面的时候遇到一个问题,在IE9下执行得非常好的脚本,在IE8里打开的时候弹出错误:expected identifier, string or number,依照经验,应该是定义对象的时候最后一个属性末尾跟了逗号,但检查一遍后没发现有这样的情况,后来细致看了一下报错的位置,发现有定义json对象属性时,属性名没实用引號括起来,于是加了上去再试,问题攻克了. 综上所述,当出现expected identifier, string or number的错误时,你首先应该检查在使用对象

a标签的背景图在ie8下不显示的问题

突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另外一个同事机器上就会有这个问题, 真心奇怪! 后来找到问题的原因, 是因为在ie8下要显示a标签的背景图有一个重要属性: display:block; 同时还要注意background属性中 no-repeat 前面的空格. 改正之后, 背景图正常显示了. 不过同是ie8, 一个可以, 一个却不行这

IE8下label不能点击、样式出错

最近又踩了一个坑. 坑的不明显,后果很严重... 公司上月上线了一个网站,主要功能是表单注册那块..今天我收到消息说IE8下有问题.我去看了下表单的那部分,真的是坑啊...我用字体模拟的复选框,套在一个label里面,各大浏览器都好好地可以模拟成功,IE8下直接动也不动了...后来没办法,简单粗暴地把label改成了span(改成其他也可以..) 点击解决了,又发现其他有个地方是插件生成的label,样式直接崩了...改插件?问题是以后还能不能愉快地用label了? 就因为这个label,推广的

IE8下图片无法显示问题

一.背景图片不能显示的原因 代码: background:url(img/img1.jpg)no-repeat; background:url(img/img1.jpg) no-repeat; 第一个背景图片IE8下不会显示,第二行代码的背景图片会显示,区别在于no-repeat前面的空格,IE8对空格的敏感度很高. 二.在HTML中插入图片不能显示 HTML 1 <div class="img"> 2 <a href='javascript:'> 3 <