Ext의 템플릿을 활성화하여 두 번째 계층 json data_json을 구문 분석하는 방법-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 19:07:03

원래의

1336명이 탐색했습니다.

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이라는 구문 분석 메서드를 정의했습니다.