2014-12-02 5 views
2

에서 제대로 작동하지 않습니다 "로"와 바인딩의 Foreach 그러나 내가 가지고있는 방식에 문제가 있나요 별명 I가-각 제대로 IE9에서 작동하도록 얻을 수 IE9

IE10, IE11

에서 작동 그것? 다음 코드는 IE9에서 문제를 재현하는 데 사용할 수 있습니다

var vm = { 
 
    MyMessages: [{ 
 
     MessageType1: 'A', 
 
     MessageToShow1: 'B ' 
 
    }] 
 
}; 
 

 
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: {data: MyMessages, as: 'foo'} " class="list-unstyled"> 
 
    <li> 
 
     <div> 
 
      <a href="#" class="close" data-dismiss="alert">&times;</a> 
 
      <em><label data-bind='text: foo.MessageType1' /></em> 
 
      <label data-bind='text: foo.MessageToShow1' /> 
 
     </div> 
 
    </li> 
 
</ul>

내가 오류가 있습니다 :

'푸'정의되지

+1

나는 그것이 실제 생식 그래서 코드를 변경의 자유를 촬영했습니다. 나는이 코드로 문제를 확인할 수 있었다. 도움을 주려는 의도 였지만 근본적으로 질문을 변경했다고 생각하면 자유롭게 편집 내용을 되돌릴 수 있습니다. – Jeroen

+0

어둠 속에서 눈먼 장면을 찍었지만 속성을 인용하여 인용문을 수정 했습니까? 즉, 'foreach : {data : MyMessages,'as ':'foo '}' –

+0

@Jeff IE11이 jsfiddle에서 9 개의 문서 모드로 렌더링되도록 설정하려고했을 때 오류를 "as"를 포함하거나 포함하지 않고 얻습니다. –

답변

2

tl; dr : 열기 태그와 닫기 태그로 label 태그를 작성하십시오.

IE 9 모드에서 렌더링 할 때 IE가 "자체 닫기"태그 사용으로 인해 요소 중 일부를 잘못 분류하고있는 것으로 나타납니다. label은 그러한 태그 중 하나입니다. IE 9 모드이기 때문에 표준 (HTML5) 모드도 사용하지 않습니다. IE 10 모드는 표준 모드로 렌더링합니다. 따라서 모드에 따라 this question은 태그가 어떻게 해석되는지를 나타냅니다.

IE 9에서는 닫는 태그가없는 태그를 열린 태그로보고 있으므로 잘못된 요소에 바인딩을 적용하고있는 것으로 보입니다.

열기 및 닫기 태그를 사용하도록 레이블을 변경하면 수정 한 것으로 보입니다.

<ul data-bind="foreach: {data: MyMessages, as: 'foo'} " class="list-unstyled"> 
    <li> 
     <div> 
      <a href="#" class="close" data-dismiss="alert">&times;</a> 
      <em><label data-bind='text: foo.MessageType1'></label></em> 
      <label data-bind='text: foo.MessageToShow1'></label> 
     </div> 
    </li> 
</ul> 

http://jsfiddle.net/7c7c0e2m/1/

+0

좋은 캐치. 그것도 나의'아닌'바이올린으로 확인했다. –

+0

또한 라벨을 스팬으로 변경하면 문제가 해결 된 것으로 나타났습니다. – user80855

관련 문제