YUI 패널 확장

Question

새로운 파일에 있고 여러보기에서 공유되는 일부 사용자 지정 기능으로 YUI 패널을 확장해야한다는 요구 사항이 있습니다.

나는 이것에 대해 가장 잘하는 방법에 관해서는 약간의 상실감이있다. 누군가 나에게 어떤 포인터를 주어도 될까?

Answer 1

패널을 확장하여 본문에 목록이있는 패널을 만들려한다고 가정 해 보겠습니다. 나는 이것을 위해 보통 Y.Base.create을 사용합니다. 이는 생성자와 Y.extend을 사용하는 것보다 YUI 클래스를 확장하는 선언적 방법입니다. 그러나 나는 YUI 포럼에서 당신의 모범에 더 가까이 머물러있을 것입니다.

WidgetStdMod (Y.Panel의 구성 요소 중 하나)를 다루는 몇 가지 트릭이 있지만 대부분은 Y.extend을 사용하고 YUI 상속 패턴을 따르는 것입니다. 예를 들어 대답 해 드리겠습니다.

function MyPanel() { 
    MyPanel.superclass.constructor.apply(this, arguments); 
} 
// hack: call it the same so you get the same css class names 
// this is good for demos and tests. probably not for real life 
MyPanel.NAME = 'panel'; 

MyPanel.ATTRS = { 
    listItems: { 
     // YUI now clones this array, so all's right with the world 
     value: [] 
    }, 
    bodyContent: { 
     // we want this so that WidgetStdMod creates the body node 
     // and we can insert our list inside it 
     value: '' 
    } 
}; 

Y.extend(MyPanel, Y.Panel, { 
    // always a nice idea to keep templates in the prototype 
    LIST_TEMPLATE: '<ul class="yui3-panel-list"></ul>', 

    initializer: function (config) { 
     // you'll probably want to use progressive enhancement here 
     this._listContainer = Y.Node.create(this.LIST_TEMPLATE); 

     // initializer is also the place where you'll want to instantiate other 
     // objects that will live inside the panel 
    }, 

    renderUI: function() { 
     // you're inheriting from Panel, so you'll want to keep its rendering logic 
     // renderUI/bindUI/syncUI don't call the superclass automatically like 
     // initializer and destructor 
     MyPanel.superclass.renderUI.call(this); 

     // Normally we would append stuff to the body in the renderUI method 
     // Unfortunately, as of 3.5.0 YUI still removes all content from the body 
     // during renderUI, so we either hack it or do everything in syncUI 
     // Hacking WidgetStdModNode is doable but I don't have the code around 
     // and I haven't memorized it 
     //var body = this.getStdModNode('body'); 
    }, 

    syncUI: function() { 
     // same here 
     MyPanel.superclass.syncUI.call(this); 

     // insert stuff in the body node 
     var listContainer = this._listContainer.appendTo(this.getStdModNode('body')); 

     Y.Array.each(this.get('listItems'), function (item) { 
      listContainer.append('<li>' + item + '</li>'); 
     }); 
    } 
});