ie8下使用knockoutjs遇到的一個模板異常

標籤：style   blog   http   io   ar   color   使用   sp   for   

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，翻了下文檔沒有特殊說明，Google也沒找到類似的問題。然後懷疑是不是在往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));});

ie8下使用knockoutjs遇到的一個模板異常