YUI.Ext 학습 7일차 - View&JSONView_YUI.Ext에 대하여

WBOY

풀어 주다： 2016-05-16 19:17:02

원래의

1043명이 탐색했습니다.

2차원 관계 데이터를 하나씩 표시하려면 GIRD 구성요소를 사용할 수 있습니다. 그러나 제품 디스플레이 및 앨범과 같은 일부 상황에서는 View 구성 요소를 사용하여 "매트릭스" 데이터를 표시할 수 있습니다. View의 데이터 소스는 XMLDataModel 및 JSONDataModel을 포함하는 DataModel 개체에서 나옵니다. View는 JSON을 지원하지만 DataModel에서 사용되지 않는 경우 더 많은 이벤트와 메서드를 제공하는 View 하위 클래스 JSONView가 더 적합합니다. 일반적으로 View는 XML 데이터 소스에 사용되고 JSONView는 JSON 데이터 소스에 사용됩니다.

보기는 어떻게 작동하나요?

이전에 레코드를 출력하는 방법을 기억하시나요? 과거에는 온라인 상점을 예로 들면 다음과 같은 제품이 출력되었습니다.

<%
		.....
		//下列服务端代码为ASP using JScript（依然是JS，I'm a big JS Fan^^）
		var str ="";
		str+="<td><div id='title'>";
		str+=rs("title")+"<\/div>";
		str+="<img src="+rs("thumb_image")+">";
		str+="<\/td>"
		Resposne.Write(str);
		.....
%>

로그인 후 복사

분명히 우리의 궁극적인 목표는 HTML을 출력하고 브라우저 렌더링(Render)을 제공하는 것입니다. View의 작동 원리는 이전에 Sever가 수행한 작업이 Cilent로 이동되고 View를 사용하여 이를 처리하고(기본적으로 Domhelper의 템플릿) 브라우저가 최종적으로 출력을 렌더링한다는 점을 제외하면 동일합니다.

도움이 필요합니다: Domhelper

위에서 언급했듯이 View는 DomHelpr 없이는 작동할 수 없습니다. DomHelpr은 여기에서 "템플릿"을 제공하고 이를 컴파일합니다. 아래 코드를 참조하세요.

<br>//新建一个Template对象
var tpl = <span class="style3">new YAHOO.ext.Template</span>(<br> '<div class="entry">' + <br>  '<a class="entry-title" href="{link}">{title}</a>' +<br>  '<h4>{date} by {author} | {comments} Comments</h4>{description}' +<br> '</div><hr />'<br>);
tpl.compile(); //compile()的方法，可带来DOM性能的增益
var moreView = new YAHOO.ext.JsonView('entry-list', tpl, {
 jsonRoot: 'posts'
});
//又或者隐式创建Template对象
var view = new YAHOO.ext.View('my-element', 
   <span class="style1">'<div id="{0}">{2} - {1}</div>'</span>, // auto create template
   dataModel, { 
    singleSelect: true, 
    selectedClass: 'ydataview-selected'
   });

로그인 후 복사

데이터 로드 중

VIEW는 데이터를 로드하는 방식이 JSONView와 다릅니다. VIEW는 DataModel의 load()를 사용하고 JSONView는 UpateManager의 load()를 사용합니다. JSONView의 load() 메서드에 집중해 보겠습니다.

 view.load({ url: 'your-url.php',<br> params: {param1: 'foo', param2: 'bar'}, // 可以是URL encoded字符<br> callback: yourFunction,<br> scope: yourObject, //(optional scope) <br> discardUrl: false, <br> nocache: false,<br> text: 'Loading...',//loading之提示文字<br> timeout: 30,//超时<br> scripts: false<br> });

로그인 후 복사

url 매개변수만 선택사항이 아니며, nocache, 텍스트, 스크립트 등 기타 매개변수는 선택사항입니다. 텍스트와 스크립트는 UpdateManger 인스턴스

와 관련된 매개변수입니다.

params : 문자열/객체
(선택 사항) URL로 인코딩된 문자열 "param1=1¶m2=2" 또는 객체 {param1: 1, param2: 2}로 전달할 매개변수
콜백 : 함수
(선택 사항) 거래 완료 시 콜백 - 서명(oElement, bSuccess)과 함께 호출
discardUrl: 부울
(선택 사항) 기본적으로 업데이트를 실행하면 defaultUrl이 마지막으로 사용한 URL로 변경됩니다. true인 경우 URL이 저장되지 않습니다.

JSON사용 팁 보기

a. 그리드와 JSONView가 동시에 어떻게 데이터 소스를 호출하나요?
1. jsonData 속성을 변경합니다. 2.refresh()를 호출합니다. http://www.yui-ext.com/forum/viewtopic.php?t=1968

을 참조하세요.

b. 페이징
아직 페이징에 대한 좋은 솔루션은 없는 것 같습니다.
JsonView는 JSONDataModel을 사용하여 View를 확장합니다. 하지만 loadPage() 및 표준 DataModel 기능은 새 데이터를 로드할 때 자동으로 업데이트됩니다. 이름이 지정된 템플릿 매개변수(예: JsonView)를 원하는 경우 색인(DataModel 스타일)을 이름이 지정된 매개변수로 다시 매핑해야 합니다. 이에 대한 자세한 내용은 YAHOO.ext.View 문서를 참조하세요.
http://www.yui-ext.com/forum/viewtopic.php?t=2340

c. JSONView의 필드 대신 전체 DataModel을 가져오는 방법은 무엇입니까? Alert(mainView.jsonData);를 사용할 때마다 결과는 "정의되지 않음"입니다.
DataModel을 가져오는 경우 View 개체를 사용해야 합니다. 정의되지 않은 이유는 load()가 비동기식이므로 데이터가 먼저 로드될 때까지 기다려야 하기 때문입니다. 예:

mainView.el.getUpdateManager().on('update', function(){ 
  alert(mainView.jsonData); 
});

로그인 후 복사

http://www.yui-ext.com/forum/viewtopic.php?t=1209

참조

d. 연구 사례. 예제이미지 선택기 자체가 좋은 학습 예제입니다

JSON 형식

서비스가 다음과 같이 JSON을 출력한다고 생각할 수도 있습니다.

{"user": {"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}}

로그인 후 복사

맞습니다. 하지만 아니요, 처리할 수 없습니다. 올바른 형식은 다음과 같습니다:

{"user": <strong style="COLOR: red">[</strong>{"username": "Bob", "birthday": "1976-11-08", "join_date": "2006-08-01", "last_login": "2006-12-03"}<strong style="COLOR: red">]</strong>}

로그인 후 복사

배열 유형은 대괄호 안에 선언되며 뷰 렌더링 방법은 실제로 DataModel과 일치합니다

마지막으로 Veiw의 UML 다이어그램 제공