야후 사용자 인터페이스 블로그 (YUIBlog)

업데이트 : "MakeNode"위젯 확장

편집자 참고 사항 :이 문서는되었다 원래 올해 초 출판 . 그 이후 MakeNode 모듈은 YUI 갤러리에 게시되어 일부 향상된 기능을 받았습니다. 오늘의 기사 MakeNode에 대한 모든 최신 변경 사항을 반영합니다.

나의 이전 기사에서 YUI 3 응용 프로그램에 대한 레시피는 , 제가 사용하는 방법 보여주 Y.substitute 매우 기본적인 템플릿 프로세서로합니다. 아이디어 # YUI IRC 채널에서 여러분의 제안과 함께, 거기에서 생명을 갔고, 나는 YUI 갤러리에서 사용할 수있는 위젯 확장했으며,라는 MakeNode . MakeNode는 일반 템플릿 프로세서가 아니며 그것은 하나 의미되지 않습니다. 반면에, 그것은 단단히 YUI와 통합되어 위젯 클래스와 이벤트 헬퍼 및 국제화를 포함하여 기초 클래스. 이 문서에서 나는 소요됩니다 스피너 예제와 이전 문서의 지침을 따르도록하고 MakeNode를 사용하여 그것을 수정합니다. MakeNode은 갤러리 요소뿐만 아니라 수정된로 이용 가능 스피너의 구성 요소와 예제 본 문서에서 사용됩니다 .

구성 요소를 확장

MakeNode을로드하려면 귀하의 모듈을 포함시킬 필요가 YUI().use() 이름을 사용하여 성명 'gallery-makenode' 또는,를 통해 모듈을 정의하는 경우 YUI.add() ,로 나열할 requires 배열입니다. 그런 다음 위젯을 연장하기 위해, 당신은 할 세 번째 인자에 나열 Y.Base.create() 과 같이 :

  Y.Spinner = Y.Base.create (
      '스피너'
      Y.Widget,
      [Y.MakeNode가]
      {
         / / 인스턴스 멤버 ...
      }
      {
          / / 정적 멤버
      }
 ); 

당신은 그러한 WidgetParent, WidgetChild, WidgetStdMode와 같은 위젯에 적합한 확장의 수를 따라 MakeNode를 추가할 수 등 MakeNode는 개발자에 의해 사용하는 두 가지 보호 방법 추가 _makeNode 및 _locateNodes, 발견한다면 그것은 몇 가지 정적 속성에서 읽을 수 .

그들이 그들과 함께 귀찮게하지 말아야 구성 요소를 사용 도구자하여 구성 요소 개발자가 아닌 의해 사용될 의미되므로이 확장의 모든 구성원 중 보호 또는 개인입니다. 볼 때 '쇼 보호 "옵션을 체크하는 것을 잊지 API 문서를 .

템플릿 정의

평소 할 첫번째 일은 당신의 구성 요소에 대한 템플릿을 정의하는 것입니다. 스피너 들어, 템플릿이 될 것입니다 :

  _TEMPLATE : [
     '<input type="text" title="{s input}" class="{c input}">'
     '<button type="button" title="{s up}" class="{c up}"> </ 버튼>',
     '<button type="button" title="{s down}" class="{c down}"> </ 버튼>'
 ]. 조인 ( '\ n'을), 

기본 템플릿은 일반적으로 명명됩니다 _TEMPLATE 와 같은 클래스의 다른 정적 속성, 함께 선언 ATTRS . 다른 누구도 명시적으로 제공되지 않을 경우 MakeNode이 템플릿을 사용합니다. 템플릿은 일반 HTML 플러스 곱슬 브래킷로 묶어 자리 표시 일련의, 단일 문자 (처리 코드)로 만들어진 하나 이상의 인자가 뒤에 각각 이루어져있다. 자리 표시 자와 그들이 생산하고 있습니다 :

• {@ attributeName} 구성 속성 값이

• {p propertyName} 인스턴스 속성 값을

• {m methodName arg1 arg2 ….} 특정 메서드의 반환 값입니다. 처리 코드는 메서드 이름과 공백으로 구분된 인수의 수에 따라하고 있습니다.

• {c classNameKey} 에서 생성된 CSS의 클래스 _CLASS_NAMES 정적 속성 (참조 _CLASS_NAMES 속성 아래 부분)

• {s key} 에서 문자열 strings 사용 특성 key 하위 속성으로.

• {? condition valueIfTrue valueIfFalse } 훨씬처럼 ?: 자바 스크립트의 연산자, 위해 평가 valueIfTrue 조건 truish 경우 valueIfFalse 달리.

• {1 condition valueIfOne valueIfMore } 상태의 값에 따라 단수 / 복수형 단어를 생산하는 데 사용됩니다.

• {} 다른 모든 가치는 것처럼 처리됩니다 Y.substitute 않습니다.

예를 들어, {@ value} 로 번역됩니다 this.get('value') 동안 {p value} 로 해석 this['value'] .

자리 표시가 인수를해야하는 경우처럼 {m} , {?} 과 {1} , 문자열은 이중 인용 부호로 묶어야합니다. 숫자, 논리 타입과 null (모든 따옴표 밖에서)은 적절한 데이터 형식을 구문 분석됩니다. 나타내지는 중첩될 수 있습니다. {?} 과 {1} 자리 표시는 보통 상태에 중첩된 자리 표시를 포함하고 아마도 그들의 값을, 예를 들어합니다

  {P 수량} {1} P 수량} "유닛" "대"} 

재산면 qty 1입니다, 그것을 평가할 것이다 "1 unit" , 2 이상은 반환 "2 units" 등등. 제로 다루는 더 정교한 버전은 다음과 같습니다

  {?  {P 수량} "{P 수량} {1} P 수량}"유닛 ""대 "}", "없음"} 

문자열면, 안쪽 자리 표시 처리의 결과가, 시세 자체의 세트로 묶어야해야합니다.

인용 문자열 안에 따옴표를 포함하려면 사용할 \\" . MakeNode을 사용하지 않고, JavaScript를 하나 하나를 해석하고 MakeNode하는지기 전에 그것을 버리고 오직 큰 따옴표가 허용되는 것이기 때문에 요구되는 이중 백슬래시 eval() 때문에 파서는 제한되어 있지만 안전합니다. 거만 빼고 숫자, null , 논리 타입과 이중 인용 문자열은 무시됩니다.

{?} 자리 표시도 체크 박스와 라디오 버튼과 함께 사용하는 것이 편리할 때가 많다. 그것은 문자열이 생성하는 데 사용할 수있는 "checked" 다음 처리 명령 코드의 진리 값에 따라. 따라서 <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> 표시된 확인란을 생산할 것입 경우 getLength 메서드가 반환 아무것도하지만 영.

들어 {c} 자리 표시 자, 우리는 필요 _CLASS_NAMES 속성이 정의된.

또한 나타내지는 말로 놈들을 추가하여 MakeNode에 추가할 수 _templateHandlers 해쉬.

_CLASS_NAMES 속성

함께 ATTRS 및 _TEMPLATE 정적 속성, 우리는 정의할 수 _CLASS_NAMES 문자열의 배열로 가리 정적 속성을. 이러한 문자열의 각 클래스를 생성하는 데 사용됩니다. 따라서 _CLASS_NAMES: ['input'] 클래스 생산할 것이다 "yui3-spinner-input" . 이러한 classNames은 인스턴스 속성에 저장됩니다 this._classNames . {c input} 위 템플릿에서 자리 표시 자이에 의해 대체될 것이다 "yui3-spinner-input" . 나는에 나열된 문자열 전화 _CLASS_NAMES 등, 'input' 우리가 나중에 보자으로, 그들이 실제 클래스 또는 그 classNames를 포함하는 요소를 참조하기위한 열쇠로 사용할 수 있기 때문에, "클래스 키를".

당신이 사용할 수 _CLASS_NAMES 는 템플릿이나하지에 사용할 것인지, classNames의 번호를 생성하는 속성을. 당신은 여전히 내부에서 그 여분 classNames에 도달할 수 this._classNames . 클래스를 사용하여 생성되는 yui3 의 값은 다음 접두사 NAME 고정 자산은 소문자로 설정되어 다음에 주어진 문자열 _CLASS_NAMES (이 마지막 하나가 소문자 켜져되지 않습니다), 모두 하이픈으로 구분합니다. _classNames 해시도를위한 classNames 포함될 boundingBox 및 contentBox , 아래의 첫 번째 "boundingBox" 아래의 키와 두 번째로 "content" 키를. 위젯에 부여 boundingBox 의 가치에서 파생 classNames NAME 부터 상속 체인의 클래스의 각 속성에 yui3-widget . MakeNode 매장에 this._classNames 에 대해서만 최고 최고 클래스 boundingBox .

WidgetStdMod 모듈이로드되면 MakeNode는 또한 대한 항목이 생성됩니다 HEADER , BODY 과 FOOTER 또한 동일한 모듈에 정의된 상수들을 동일한 키와 섹션.

구성 요소는 같은 거리에 위젯에서 여러 수준이면 SuperSpecialSpinner 에서 상속 SuperSpinner 에서 상속 Spinner 에서 상속 Widget, 그 중 일부 또는 모두가 있으면 _CLASS_NAMES 속성 정의 MakeNode들을 전부 classNames을 생산하고 그들을 저장합니다 this._classNames . 이 이름은 이미 이전 단계에서 선언된 각 레벨에 포함시킬 필요가 없습니다. 사실, 당신이 각 수준에서 생산 classNames가의 값을 사용하지 않으므로 것이 낫다 NAME 그런 수준의 속성을. 따라서 년에 SuperSpecialSpinner , {c input} 여전히집니다 "yui3-spinner-input" 이 아니라 "yui3-superspecialspinner-input" 그래서 누군가는 당신의 CSS 파일이 여전히 유효하게됩니다.

{S} 자리 표시

위젯은이 strings 그것이 어떤 값으로 초기화 아니지만, 정의 구성 속성을 지정해야합니다. 이 속성은 (또는, 스크린 리더를 통해 읽어주는) 사용자에게 표시되는 문자열을 개최하기위한 것입니다. 그것은 당신이 직접 템플릿에 보이는 문자열을 포함하지 않을 것이 중요합니다. 이것은 MakeNode의 요건 아닙니다 - 그것은 전혀 좋은 생각되지 않았어요. 볼 또는 사용자에게 읽기해야할 필요가있는 모든 문자열은 항상에 배치되어야 strings 속성. strings 속성은 각각의 텍스트를 그 핵심으로 자리잡고 있습니다 해시가 포함되어 있습니다. 스피너 구성 요소는 귀하가 위 템플릿에서 사용되는 볼 수있는 다음과 같은 문자열을 가지고 있습니다.

  문자열 : {
     값 : {
         입력 : "주요 증가를위한 작은 단위, 페이지 업 / 다운 키를 아래로 화살표를 눌러 /."
         최대 : "증가"
         아래 : "감소"
     }
 } 

이런 짓을의 가장 중요한 부분은 구성 요소가 구성 요소를 사용하여 개발자가 쉽게 다른 언어로 현지 수있다는 것입니다. 스피너의 인스턴스를 만들 때, 당신이 할 수 있습니다 :

  VAR mySpinner = 새로운 스피너 ({문자열 : Y.Intl.get ( '꼭두각시')}); 

구성 속성 설정 strings 이런식으로하는 것은 기본 대체 strings 이전에 정의된 언어를 사용하는 언어 리소스 파일에서 해당과 가치를. {s} 자리 표시에 저장된 문자열에 액세스하는 strings 로 설정하면 중 기본 사람이나 번역된 것들, 속성을 지정해야합니다. {s xxxx} 자리 표시는 거의 사용 같다 {@ strings.xxxx} 화된 대체 문자열이 추가로 처리됩니다 나타내지 않음을 가질 수있는 경우를 제외하고. 구문의 주문이 언어에서 언어로 다양하며이 모든 언어에 맞게 그 자리 표시를 포함하여 텍스트를 rephrasing 수 있기 때문에 이것은 번역이 중요합니다. 문자열도 사용하여 액세스할 수있는 {@ strings.xxxx.yyyy.zzzz} 깊은 아래로 중첩 문자열로 액세스를 허용하며 추가로 대체를 방지합니다. 컬리 괄호는 사용하여 텍스트에 포함될 수있는 {LBRACE} 와 {RBRACE} 자리 표시 자로.

renderUI에 _makeNode 사용

우리는 구성 요소에 마크업을 만들 수있는 템플릿을 사용합니다. 이렇게하려면, 우리는 MakeNode의 전화 _makeNode 과 같이 방법을 :

  renderUI : 함수 () {
     . this.get ( 'contentBox') 추가 (this._makeNode ());
 } 

이렇게 작성합니다 contentBox 템플릿을 처리에서 마크업으로 우리의 위젯의. _makeNode 메서드의 인스턴스를 반환 Y.Node 추가하거나 어디서든, 아니면 나중에 사용하기 위해 개최 삽입할 수 있습니다. 그것은 문자열을 반환하지 않으며, 그것은 생산 Node 인스턴스를. (당신이 문자열이 아닌 노드가 필요 할 경우 사용할 수 있습니다 _substitute 당신이 템플릿에 전달해야합니다 메서드를.)

_makeNode 으로, 템플릿에 대한 참조와 자리 표시 기입하기위한 객체 : 방법은 두 가지 선택적 인수를 Y.substitute 않습니다. 우리의 간단한 스피너 예제에서는 전체 위젯이지만 다른 위젯은 여러 템플릿으로 만들어진 조각이 필요할 수를위한 하나의 템플릿이 있습니다. 이 경우, 일반적으로 부를 것이다 _makeNode 주요 부분에 대한 인수 노와 함께 여분의 부품을 채워 서로 다른 템플릿과 함께 다시 한 번 그것을 부릅니다. 예를 들어 이 포함되어 있습니다 renderUI 방법 :

  renderUI : 함수 () {
     VAR fieldset = this._makeNode ();
     this.each (함수 (항목) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, 항목));
     }이);
     this.get ( 'contentBox') 추가 (fieldset).;
 } 

하는 첫번째 전화 _makeNode 반환 Node 변수에 저장된 인스턴스 fieldset . 샘플 구성 요소도 함께 연장됩니다 Y.ArrayList 있도록 RADIO_TEMPLATE 배열 목록에 저장된 항목과에 추가 인한 노드에서 가져온 값으로 채워집니다 fieldset 그것은 마지막에 추가되기 전에 contentBox . 와 같은 특별한 자리 표시 {@} 또는 {p} 여전히 주요 객체의 속성 또는 속성을 참조합니다. 중첩된 항목은 그대로 처리됩니다 Y.substitute 한다면.

_locateNodes 방법

MakeNode 추가로 제공 _locateNodes 에 선언 classNames 모든 요소를 찾으려고합니다 방법 _CLASS_NAMES . 당신은 클래스 키의 숫자를 전달할 수 있습니다 특정 요소를 찾으려면, 그렇지 않으면 _locateNodes 모두를 시도합니다. 각 클래스에서 찾을 각 요소에 대한, _locateNodes 키 이름과 다음에 밑줄을 접두어를 사용하여 전용 인스턴스 속성을 생산할 것이다 "Node" 접미사. 따라서 우리의 스피너 예제에서, _locateNodes 프로퍼티 생성합니다 _inputNode , _upNode 및 _downNode . 여러 요소가 같은 클래스가있을 경우 _locateNodes 그들의 첫 번째에 대한 참조를 반환합니다. 요소가 발견되지 않으면 아무런 변수가 생성되지 않습니다.

스피너 구성 요소에서는 사용 _locateNodes 마크업을 만든 후 :

  renderUI : 함수 () {
     . this.get (CBX) 추가 (this._makeNode ());
     this._locateNodes ();
 } 

_EVENTS 고정 자산

하나 추가 속성의 라인을 따라 정의할 수 _TEMPLATE 및 _CLASS_NAMES 그입니다 _EVENTS . _EVENTS 클래스 이름 키 이벤트 타입과 그 타입을 처리하는 방법 해시를 포함하는 각 이루어진 해시를 포함합니다. 그것은 좋은 예제와 함께 설명되어 있습니다 :

  _EVENTS : {
     입력 : '변경', / /​​ 호출의 this._afterInputChange
     boundingBox : [
         {
             유형 : '키'
             FN : '_onDirectionKey', / /​​ 호출 this._onDirectionKey을
             인수 : ((Y.UA.opera) "아래로":!? "누르십시오 :") + "38, 40, 33, 34 '
         }
         'mousedown'/ / 호출 this._afterBoundingBoxMousedown
     ]
     문서 : 'mouseup', / /​​ 호출의 this._afterDocumentMouseup,
     Y : 'broadcastingObject : someEvent'/ / 호출이 [ "_afterYBroadcastingObject : someEvent"]
 } 

_EVENTS 항목의 번호와 개체 (해시)입니다. 속성의 이름, 즉, 해시의 열쇠는 누구의 이벤트를 우리가 잘 들어 노드를 식별합니다. 그들에 정의된 동일한 클래스의 열쇠 _CLASS_NAMES . 몇 가지 여분의 특수 키가 있습니다 :

• "boundingBox" 경계 상자 자체를 참조합니다.

• "document" 이 위젯을 포함하는 문서를 말합니다.

• "THIS" 위젯 자체를 의미

• "Y" 를 의미 Y 인스턴스.

위젯 역시 WidgetStdMod으로 연장되어 있으면 키 HEADER , BODY 및 FOOTER 그들이에서 사용할 수 있기 때문에 해당 섹션을 참조합니다 _classNames 해쉬. 위의 아무도 인용해야하지 않도록 그들이 유효한 식별자가있는 경우 JavaScript는 인용되는 키가 필요하지 않습니다.

_EVENTS 이후 부동산이 처리되는 renderUI , bindUI 및 syncUI 위젯이 이미 문서 본문 내에 삽입될 예정입니다 있도록 메소드가 호출되어, 그렇지 않으면 "document" 식별자가 실패합니다.

이러한 요소 각각에 대해 이벤트 식별자 또는 이벤트 식별자의 배열이 있습니다. 이벤트에 귀를 기울 이벤트 또는 자세한 내용과 개체의 형식으로 확인할 수 있습니다. 기본적으로 MakeNode가 사용하는 명명된 메소드 리스너로 사용할 것입니다 "_after" 첫 문자로 요소 식별자 뒤에 접두사가 자사의 첫 문자는 대문자와 이벤트 유형 다음에 대문자로 표기했습니다. 위 코드 블록은 각 이벤트의 호출 방법을 보여줍니다.

이벤트 식별자는 속성을 가진 객체가 될 수 type , fn 및 args . type 필수이며, 말을하는 이벤트의 유형을 나타냅니다. fn 속성에 따라서 자동 명명을 피하고 이벤트에 잘 들어 메서드의 이름을 제공합니다. 이후 _EVENTS 정적 프로퍼티, 그것에 액세스할 수 없습니다 this 그 방법에 실제 참조를받을 수 있도록, 오직 그 이름을. args 인수는 같은과 같은 호출자에게 추가로 인자를 전달하는 데 사용할 수있는 key 열쇠 사양을 필요로 이벤트.

MakeNode 사용됩니다 Node.delegate 내 요소의 이벤트를 들어야 boundingBox 이것을 사용하면서 Node.after 에서 이벤트를 듣고 boundingBox 과 문서 본문. 그것은 사용 this.after 아래에 이벤트에 들어 THIS 키 및 Y.after 아래에 나열된 청취자에 대한 Y 키. 모든 행사가 사람들을 그렇게 어떠한 경우에도 이러한 이벤트를 예방하거나 막을 수 쏘면 개체의 동작을 필터링하지, 그들이 위젯은 이벤트에 응답할 수 있도록 의미되므로 이벤트 리스너 사용한 후에 말을하고 있습니다. (참고 : 듣고 key 의 위임 이후 중첩된 요소의 이벤트를하는 것은, 오직 위의 버전 3.4.0pr1와 함께 작동 key 이벤트는 이전에 사용할 수 없었 다른 모든 기능뿐만 아니라 이전 버전과 함께 작동합니다.).

_EVENTS 구성 요소가 서로 상속 때 선언이 누적되는 형태입니다. 상속 체인의 각 클래스는 고유해야합니다 _EVENTS 별도로 처리 선언을.

_ATTRS_2_UI 고정 자산

이벤트는 UI의 구성 요소와 구성 요소의 UI까지 두 길을가는거야. 처음으로 처리되는 _EVENTS 속성입니다. 그런 다음 사용자 인터페이스에 반영해야하는 속성 값이 변경에 의해 해고 이벤트가 없습니다. 전 구성 속성을 변경하는 보조 효과가 이전 기사에서 언급했듯이, 그들은 선택 사항으로 변경 이벤트 리스너가 없습니다 취급해야 setter 전용으로 설정되는 값을 정규화 처리한다 특성의 방법. UI는 처음에 구성 속성의 상태를 반영해야 syncUI 모든 속성 변경 이벤트에서 다음 초기화되는 때. 후자의 경우, 우리는 우리가 일반적으로 그랬을까요하는 이벤트 리스너를 장착해야 bindUI . 위젯은 이미 제가 이전 기사에 댓글에서 설명한 그렇게 간단한 문제를 만드는 메커니즘을 제공합니다.

위젯은 인스턴스 속성 사용 _UI_ATTRS 이 추가 속성을 가진 개체가 포함되어 있습니다 SYNC 와 BIND . 이러한 각각 초기 서로 연관되는 구성 속성의 이름을 나열하는 배열입니다 그리고 현재 값을 반영 UI를 유지하기 위해 말을. 위젯은 이들 항목 각각에 의해 접두어 속성 이름 이름을 따서 그것과 연관된 메서드가 기대 _uiSet 적절한 낙타 케이스에 메소드 이름을 가지고 대문자로 변환된 속성 이름의 첫 문자로합니다. 경우에 따라서 "value" 의 나열되었습니다 _UI_ATTRS 배열 (중의 SYNC 또는 BIND ), 위젯이 찾는다는 것이 _uiSetValue 방법을. 이 메서드는 두 개의 인수, 받게 될 것입니다 value 설정되고 그리고 src 변화합니다. 이것은 우리의 스피너위한 코드입니다 _uiSetValue 방법 :

  _uiSetValue : 기능 (가치, SRC) {
     {(SRC === UI) 경우
         반환;
     }
     this._inputNode.set (값, this.get (포맷) (값));
 } 

당신은 문자열 상수에 해당하는 코드 조각에서 볼 수있는 모든 대문자 식별자는 YUI 압축기보다 그 일을 할 수 있도록, 다른 곳에서 선언했다. 방법은, 기본적으로 세트 value 의 HTML 속성 <input> 포맷 후에, 새로운 가치를 세트로 상자를. 텍스트 상자에 대한 참조가 제공한 _locateNodes . src 인수가 처음에 문자열 값으로 설정되어 있는지 확인합니다 'ui' . 이것 그렇다면 어떠한 조치도 취하지 않을 것입니다. 이것은 무한 루프를 방지하는 것입니다. 사용자가 입력 상자에 무언가를 입력하면 그 값은 침략했을 때 value 나서 해고 구성 속성 valueChange 꺼야, 이벤트, _uiSetValue 그때 가서 입력 상자의 값을 변경 묻지만이긴해도, 전화를하는 다시 전체 프로세스를 실행합니다. 따라서,에 _uiSetValue 우리가 변화가 UI에서 유래 안다면, 우리는 아무것도하지 않고 그래서 루프를 깰. 그러나 이것은 다른 코드의 또 다른 조각이 필요합니다. DOM 이벤트에 대한 리스너에서, 우리는 구성 속성을 설정할 때, 우리는 이렇게 설정하는 세 번째 선택적 인수를 사용 :

  _afterValueChange : 기능 (EV) {
     this.set (값, ev.newVal, {SRC : UI});
 } 

그것은 UI에서 오는 변화가 따라서 표시가 있는지 확인하고 다음 루프를 피하기 위해 같은 플래그를 확인하기 위해 우리에게있다. 식별자 사용하고 계십니까 src 아닌 속성의 값을 설정할 때 source 인식되지 않습니다.

이 모든 말씀으로 아직 정적 속성에 대해 얘기하지 않은 _ATTRS_2_UI 이 섹션의 머리글에 언급. 나의 이전 기사 쇼의 코멘트 (내가 그들에서 만든 잘못 들어와서 통해), UI에 영향을 미치는 모든 속성이 올바르게 나열되어 있는지 확인하는 것처럼하는 것은 다소 혼란입니다. 당신은 초기화해서는 안 _UI_ATTRS 위젯이 이미 속성 한꺼번에 많이 나열하고 이들이 손실됩니다 때문에 처음부터. 당신이 그것에게 권리를 수행하는 방법을 기억하기 다소 어렵다는 기존, 이상의 새로운 속성 이름를 연결해야합니다. 간단하게하기 위해 MakeNode는 정적 속성에서 읽습니다 _ATTRS_2_UI 그리고 당신을 위해 그 연결 해. 그것은 각 레벨에서 각 클래스는 자체 속성을 처리할 수 있도록 상속 체인의 각각의 클래스에서 이러한 모든리스트를 연결합니다. 스피너에서 우리는있다 :

  _ATTRS_2_UI : {
     BIND : 값,
     SYNC : VALUE
 } 

MakeNode이 사건에서와 같이, 이름의 배열 또는 단일 속성 이름을 모두 동의합니다.

문제는 자연적으로 발생, 왜 두 목록, 동기화를 위해 다른 바인딩에 대해 하나? SYNC , 주위를 처음 사용 후 renderUI 및 bindUI 그들이 존재하는 경우 메서드가 호출되고 전에 syncUI 에 나와있는 동안 BIND 에 바인딩됩니다 나중에 변경 사항에 해당하는 속성. 꽤 자주 SYNC 배열보다 적은 수의 항목이있는 BIND 목록과 구성 요소에 대한 템플릿이 이미 구성 속성과 같은 매우 동일한 기본값을 가지고 있습니다 및 초기 동기화 할 필요가 없습니다 때문입니다. 대한 기본값면, value 구성 속성이 빈 문자열이며 <input> 템플릿 요소가 전혀 없습니다 value 속성을 다음 초기화 그들을 동기화 할 필요가 없습니다.

에 나열된 특성 BIND 그들의 것이다 _uiSet Xxxx 속성이 임의의 순서로 설정할 수로, 임의의 순서로 불리는 방법을. 에 나열된 속성 SYNC 하나가 다른에 종속되어 있으면, 그들의 inheritors 전에 조상들을 함께 나열되는 순서대로 한 번 호출됩니다 (어떤 사람들이해서는 안됩니다), 순서가 중요할 수도 있습니다.

MakeNode는 이러한 배열 중 하나에서 중복 항목을 확인합니다. 어떤이 나타나지 않으면 클래스의 구성 요소가 이미 거예요 대부분 지나쳐 가다이 속성과 새로운 선언을 처리에서 상속 것을 의미합니다 _uiSet Xxxx 이에 대한 핸들러. 덧붙여, MakeNode도에서 중복 항목을 확인 _CLASS_NAMES 또한, 비록 전부는 아니 일부에 충돌을 일으킬 수있는, 상황. MakeNode은 그러한 오류 로그에 메시지를 씁니다.

_PUBLISH 재산

마지막으로, _PUBLISH 정적 속성은 게시해야 해당 이벤트를 나열합니다. 그것은 키와 그 값으로 구성 속성에 리터럴 개체로 이벤트의 이름을 사용하여 해시가 포함되어 있습니다. 그것은 모든 상속 체인의 그러한 속성에 나열된 모든 이벤트를 게시합니다. 동일한 이벤트 이름은 수업 시간에 나중 것들의 구성 특성은 기존의 것들에 사람을 무시하게됩니다 그것으로부터 상속하는 클래스에 게시될 수 있습니다. 예를 들어, 전세계적으로 기존의 이벤트 방송을 만들고 싶어 할 수도 있습니다. 단지와 마찬가지로 _EVENTS 이후 재산, _PUBLISH 에 대한 접근없이 정적 속성입니다 this 함수를 지정할 때, 그것은 주어진해야 할 문자열로 메서드의 이름입니다.

결론

MakeNode 고도로 위젯 기반 클래스와 통합되어 기능과 함께 매우 간단한 템플릿 프로세서를 제공합니다. 또한 템플릿에 사용되는 classNames를 작성하고 찾아 만든 노드를 참조하기 위해 그 이름을 사용하는 도우미 메서드를 제공합니다. 그것은 또한 모두 UI 및 구성 요소 자체에 의해 생성된 이벤트에 연결 및 방법과 각각 연결하는 수단을 제공합니다. 똑바로 위젯 및 정의할 수 있습니다 클래스의 모든 수준에 상속 체인을 존중 돌보는 동안 그것은이 모든 것을 수행합니다.

그것은 절대적으로 모든 가능성을 제공하지만, 그들의 좋은 범위를 포함하지 않습니다. 그럼에도 불구하고, 그것은 여분의 기능을 추가에서 당신을 배제하지 않습니다. 당신이 작성해야 할 필요가 거의 없습니다 거의있을 bindUI 또는 syncUI 당신 MakeNode에서 제공하는 접착제를 사용하는 경우 방법이지만 MakeNode 그들을 사용하지 않기 때문에 당신은 할 수 있습니다.

갤러리 컴포넌트의까지, 나 역시 수정한 앤서니 작은 옹기병의 버튼 세트를 읽을 수있는 인내를 가지고있는 모든 가능한 아코디언과 TimeSpinner 부품, 만든 사람들에게 보너스로 갤러리를 .

소개 저자 : 다니엘 페레로는 (화면 이름 Satyam) 상당히 오랫동안 주위되었습니다. ENIAC은 그가 태어나기 하루 해제, 그래서 그것을 놓친 근데 그 이후로 거의보고되지 않았습니다. 그는 펀치 카드에 대한 기회, 프로그램 6,502 칩 (애플 II를 기억하세요?), 자신의 TRS-80와 다른 박물관에 있었 을텐데 자신의 모국어 아르헨티나 운영 장비의 몇몇 환상적인 조각을 참조하십시오.을 받았어요 세계화 그 후 거의 사용 가능한 영어 (플러스 전기 공학 학위) NCSA 모자이크 시대의 베이 지역의 뒤쪽에 5 년간 직장에서 종료 경력 경로 바꿔, 세계로 문을 열었을 때. 완전히 자신의 친구가 '<s와>의 가득한 그의 일반 텍스트 편집기에서 쓴 재미있는 squiggles에 의해 흥미, 그는 프론트 엔드 엔지니어링의 세계에 대해 꽤 많은 것을 학습하게되었습니다. 이것은 코볼과 포트란부터 긴 여행있었습니다. 이제 그는 바르셀로나, 스페인의 지중해 해안 가까이에 아주 행복하게 반 은퇴한 살고있다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!