>  기사  >  웹 프론트엔드  >  Ext의 템플릿을 활성화하여 두 번째 계층 json data_json을 구문 분석하는 방법

Ext의 템플릿을 활성화하여 두 번째 계층 json data_json을 구문 분석하는 방법

WBOY
WBOY원래의
2016-05-16 19:07:031299검색

Ext의 템플릿은 json 데이터를 전달하여 템플릿 교체를 지원합니다.
API에 이런 예가 있습니다.

코드 복사 코드는 다음과 같습니다.

var t = new Ext.Template(
'
',
'{name :trim} {value :ellipsis(10)}',
'
'
)
t.append('some-element', {id: ' myid', cls: 'myclass', 이름: 'foo', 값: 'bar'})



테스트를 위해 약간 수정:

코드 복사 코드는 다음과 같습니다.

var t = new Ext.Template(
'
',
'{name} {값}',
'< /div>'
) ;
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); (dt);


위 코드를 실행하면
foo bar<가 나타납니다. ;/div>는 교체가 성공했음을 나타냅니다.

그런데 이런 템플릿 데이터가 또 있다면


코드 복사 코드는 다음과 같습니다. :
{id: 'myid', cls:{o:'myclass'}, 이름: 'foo', 값: 'bar'}



us 템플릿의 원래 cls 부분을 myclass인 cls.o 값으로 바꾸고 싶습니다. 어떻게 해야 할까요? {cls.o}를 직접 사용해 보시겠습니까? 확실히 작동하지 않으며 대체 방법이 없습니다. 템플릿 일치 및 교체는 {} 및 JSON 변수의 콜론 앞의 문자열과 직접 일치하기 때문입니다. 물론 문자열 cls.o를 찾을 수 없으므로 일치할 수 없습니다.
다행히 템플릿은 데이터 분석 및 처리를 지원합니다.
우리는 분석 함수를 직접 정의할 수 있습니다. 실제로는 매우 간단합니다.



코드 복사 코드는 다음과 같습니다.
var t = new Ext.Template(
'
',
'{name } {값}',
'
'
)
t.parseJSON=function(data){return data.o}
var dt= t.apply( {id: 'myid', cls: {o:'myclass'}, 이름: 'foo', 값: 'bar'})
alert(dt)



템플릿의 최상위 cls에 액세스한 다음 cls(객체)의 값을 처리하는(해당 o 속성에 직접 액세스) parsJSON이라는 구문 분석 메서드를 정의했습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.