How to use the basis.ui.Node.subclass function in basis

wheelStep: function(event){
        if (event.wheelDelta < 0)
          this.stepDown();
        else
          this.stepUp();

        // prevent page scrolling
        event.preventDefault();
      }
    },

   /**
    * @inheritDoc
    */
    satellite: {
      marks: Node.subclass({
        className: namespace + '.MarkLayers',
        template: templates.MarkLayers,
        childClass: MarkLayer
      })
    },

   /**
    * @inheritDoc
    */
    init: function(){
      // save init values
      var step = this.step;
      var value = this.value;

      // make new values possible
      this.step = NaN;

template: resource('./dom/element.tmpl'),
  binding: {
    name: 'name',
    binding: 'bindingName',
    nestedView: 'nestedView',
    childrenHidden: 'childrenHidden',
    inline: 'inlineChildren',
    attributes: 'satellite:',
    singleton: function(node){
      return SINGLETON.indexOf(node.name) != -1;
    }
  },
  childFactory: childFactory,
  satellite: {
    attributes: {
      instance: Node.subclass({
        template: resource('./dom/attritubes.tmpl'),
        childClass: Attribute
      }),
      config: function(owner){
        return {
          childNodes: owner.attributes
        };
      }
    }
  }
});

NodeClassByType.text = DOMNode.subclass({
  template: resource('./dom/text.tmpl'),
  binding: {
    value: 'value',

var Node = require('basis.ui').Node;
var Value = require('basis.data').Value;

module.exports = Node.subclass({
  autoDelegate: true,
  template: resource('./class-view.tmpl'),
  binding: {
    isClass: 'data:',
    className: 'data:',
    classLoc: 'data:',
    renderLoc: 'data:',
    extendsClassName: 'data:',
    extendsLoc: 'data:'
  },
  childClass: {
    template: resource('./class-decorator.tmpl'),
    binding: {
      name: 'name',
      loc: 'loc',
      fnLoc: 'fnLoc',

hovered: 'hovered',
    componentName: 'data:',
    name: 'data:',
    nestedView: 'data:',
    foreign: 'data:',
    childrenHidden: 'data:',
    inline: 'data:inlineChildren',
    attributes: 'satellite:',
    singleton: function(node) {
      return SINGLETON.indexOf(node.data.name) != -1;
    }
  },
  childFactory: childFactory,
  satellite: {
    attributes: {
      instance: Node.subclass({
        template: resource('./template/attritubes.tmpl'),
        childClass: Attribute
      }),
      config: function(owner) {
        return {
          childNodes: owner.data.attributes.map(function(attr) {
            return {
              data: attr,
              childNodes: wrapData(attr.childNodes)
            };
          })
        };
      }
    }
  }
});

event.die();
      }
    },

    emit_childNodesModified: function(delta){
      ScrollPanel.prototype.emit_childNodesModified.call(this, delta);

      if (this.scroller && delta.inserted && this.childNodes.length == delta.inserted.length)
      {
        this.scrollToChild(this.firstChild, true);
        this.firstChild.select();
      }
    },

    childClass: Node.subclass({
      className: namespace + '.ScrollGalleryItem',

      template: templates.ScrollGalleryItem,

      action: {
        select: function(){
          if (!this.parentNode.scroller.isMoved)
            this.select();
        }
      },

      emit_select: function(){
        Node.prototype.emit_select.call(this);
        this.parentNode.scrollToChild(this);
      }
    }),

});

module.exports = new Page({
    className: 'Page.Env',
    handler: {
        open: function() {
            domEvent.addGlobalHandler('keydown', handleKeyEvent);
            this.satellite.content.satellite.filterInput.focus();
        },
        close: function() {
            domEvent.removeGlobalHandler('keydown', handleKeyEvent);
        }
    },
    satellite: {
        content: {
            instance: Node.subclass({
                template: resource('./template/template.tmpl'),
                binding: {
                    filterInput: 'satellite:',
                    modules: 'satellite:',
                    modeSwitcher: 'satellite:',
                    suggestionChoice: Value.query(suggestionChoice, 'target'),
                    modulesCount: Value.query(tableSourceWrapper, 'itemCount'),
                    modulesSize: sum(tableSourceWrapper, 'update', 'data.size').as(utils.formatSize),
                },
                satellite: {
                    filterInput: TextInput.subclass({
                        template: resource('./template/textInput.tmpl'),
                        binding: {
                            type: Value.query(suggestionChoice, 'target').as(function(target) {
                                if (target) {
                                    return typeMap[target.typeName];

jsSourcePopup.show(e.target);
  }
}
function leaveRefLocation() {
  clearTimeout(hideTimer);
  hideTimer = setTimeout(function() {
    jsSourcePopup.hide();
  }, 100);
}

var templates = require('basis.template').define('inspector.info', {
  section: resource('./template/info-section.tmpl'),
  location: resource('./template/info-location.tmpl')
});

var Location = Node.subclass({
  template: templates.location,
  binding: {
    type: 'type',
    loc: 'loc'
  }
});

var Section = Node.subclass({
  template: templates.section,
  binding: {
    name: 'name'
  },
  action: {
    openRefLocation: openRefLocation,
    enterRefLocation: enterRefLocation,
    leaveRefLocation: leaveRefLocation

var Node = require('basis.ui').Node;
var templateSwitcher = require('basis.template').switcher;
var hoveredBinding = require('./bindings.js').hover;
var jsSourcePopup = resource('./js-source-popup.js');
var templateApi = require('../api.js');
var fileApi = require('api').ns('file');
var SINGLETON = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source'];
var NodeClassByType = {};

function childFactory(config){
  var ChildClass = NodeClassByType[config.type] || this.childClass;

  return new ChildClass(config);
}

var DOMNode = Node.subclass({
  binding: {
    matchBinding: hoveredBinding.compute(function(node, hover){
      return node.bindingName && (!hover || hover === node.bindingName);
    })
  },
  action: {
    enter: function(){
      if (this.bindingName)
        hoveredBinding.set(this.bindingName);

      if (this.loc)
      {
        templateApi.setSourceFragment(this.loc);
        jsSourcePopup().show(this.element);
      }
    },

var Node = require('basis.ui').Node;
var template = require('basis.template');
var Cell = require('../cell/index');

var templates = template.define('app.ui.table', {
    row: resource('./template/row.tmpl')
});

module.exports = Node.subclass({
    template: templates.row,
    childClass: Cell
});

},
                mouseOut: function() {
                    tooltip.setDelegate(null);
                }
            }
        }
    }
});

module.exports = new Page({
    delegate: Value.query('owner').as(function(owner) {
        return owner ? type.Source : null;
    }),
    satellite: {
        content: {
            instance: Node.subclass({
                autoDelegate: true,
                template: resource('./template/list.tmpl'),
                dataSource: Value.query('data.profile.data.modules'),
                childClass: {
                    template: resource('./template/require/list.tmpl'),
                    binding: {
                        rawRequest: 'data:'
                    },
                    action: {
                        click: function() {
                            overlay.setDelegate(this);
                        }
                    }
                }
            })
        }