Question

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

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

Answer 1

假设你想扩展一个Panel来创建一个在其正文中有一个列表的面板。我通常会使用Y.Base.create。扩展YUI类比使用构造函数和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>');
        });
    }
});

扩展YUI面板

1 个答案: