yui - 扩展 YUI 面板

Question

我需要使用一些自定义功能来扩展 YUI 面板，这些功能将在一个新文件中并在多个视图之间共享。

我对如何最好地解决这个问题有点茫然，有人可以给我任何指示吗？

Answer 1

假设您想扩展一个 Panel 以创建一个在其主体中具有列表的面板。我通常Y.Base.create用于这个。与使用构造函数和Y.extend. 但我会在 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>');
        });
    }
});