yui - YUI パネルの拡張

Question

新しいファイルに入れられ、複数のビューで共有されるいくつかのカスタム機能を使用して、YUI パネルを拡張する必要があります。

どのようにすればよいか分からないのですが、どなたか教えていただけないでしょうか？

Answer 1

Panel を拡張して、本体にリストを持つ Panel を作成するとします。普段はY.Base.createこれに使っています。これは、コンストラクターとY.extend. しかし、私は YUI フォーラムであなたの例に近づきます。

WidgetStdMod (のコンポーネントの 1 つ) を扱うにはいくつかのトリックがありますが、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>');
        });
    }
});