# Class PanelSkipper

A skipper is an object working with zk.Widget#rerender to rerender portion(s) of a widget (rather than the whole widget). It can improve the performance a lot if it can skip a lot of portions, such as a lot of child widgets.

The skipper decides what to skip (i.e., not to rerender), detach the skipped portion(s), and attach them back after rerendering. Thus, the skipped portion won't be rerendered, nor unbound/bound.

The skipper has to implement three methods, skipped, skip and restore. skipped is used to test whether a child widget shall be skipped. skip and restore works together to detach and attach the skipped portions from the DOM tree. Here is how zk.Widget#rerender uses these two methods: ```ts rerender: function (skipper) { var skipInfo; if (skipper) skipInfo = skipper.skip(this);

this.replaceHTML(this.node, null, skipper);

if (skipInfo) skipper.restore(this, skipInfo); }

    <p>Since <a href="zk.Widget.html#rerender" class="tsd-kind-method">zk.Widget#rerender</a> will pass the returned value of <a href="zk.Skipper.html#skip" class="tsd-kind-method">skip</a> to <a href="zk.Skipper.html#restore" class="tsd-kind-method">restore</a>, the skipper doesn't need to store what are skipped. That means, it is possible to have one skipper to serve many widgets. <a href="zk.Skipper.html#nonCaptionSkipper" class="tsd-kind-property">nonCaptionSkipper</a> is a typical example.
    <p>In additions to passing a skipper to <a href="zk.Widget.html#rerender" class="tsd-kind-method">zk.Widget#rerender</a>, the widget has to implement the mold method to handle the skipper:
    ```ts
    function (skipper) {
        var html = '<fieldset' + this.domAttrs_() + '>',
            cap = this.caption;
        if (cap) html += cap.redraw();

        html += '<div id="' + this.uuid + '$cave"' + this._contentAttrs() + '>';
        if (!skipper)
        for (var w = this.firstChild; w; w = w.nextSibling)
            if (w != cap) html += w.redraw();
        return html + '</div></fieldset>';
    }

See also ZK Client-side Reference: Property Rendering.

#### Hierarchy (view full)

- Skipper
  - PanelSkipper

#####
Index

### Constructors

constructor

### Properties

$oid
$oid
nonCaptionSkipper

### Accessors

$class

### Methods

$init
$instanceof
$super
$supers
afterCreated_
afterInit
get$Class
proxy
restore
skip
skipped
isAssignableFrom
isInstance

## Constructors

### constructor

- new PanelSkipper(p): PanelSkipper

- #### Parameters

  - ##### p: Panel

  #### Returns PanelSkipper

  Overrides Skipper.constructor

## Properties

### $oid

$oid: number = 0

The object ID. Each object has its own unique $oid. It is mainly used for debugging purpose.

Trick: you can test if a JavaScript object is a ZK object by examining this property, such as `if (o.$oid) alert('o is a ZK object');`

Notice: zk.Class extends from zk.Object (so a class also has $oid)

Inherited from Skipper.$oid

### `Static` $oid

$oid: any

Inherited from Skipper.$oid

### `Static` nonCaptionSkipper

nonCaptionSkipper: Skipper = ...

An instance of zk.Skipper that can be used to skip the rerendering of child widgets except the caption.

It assumes

1. The child widget not to skip can be found by the caption data member.
2. The DOM elements to skip are child elements of the DOM element whose ID is widgetUUID$cave, where widgetUUID is the UUID of the widget being rerendered.

In other words, it detaches (i.e., skipped) all DOM elements under widget.$n('cave'). ```ts setClosable: function (closable) { if (this._closable != closable) { this._closable = closable; if (this.node) this.rerender(zk.Skipper.nonCaptionSkipper); } } ```

Inherited from Skipper.nonCaptionSkipper

## Accessors

### $class

- get $class(): typeof ZKObject

- The class that this object belongs to.

  #### Returns typeof ZKObject

  Inherited from zk.Skipper.$class

## Methods

### $init

- $init(props?): void

- The constructor.

  #### Parameters

  - ##### `Optional` props: Record<string, unknown> | (() => void)

  #### Returns void

  #### Default Value

      it does nothing so the subclass needs not to copy back
      (also harmless to call back).

  #### See

  afterInit

  #### Deprecated

  as of 10.0 released. Using ES6 `constructor` instead.

  Inherited from Skipper.$init

### $instanceof

- $instanceof(...klass): boolean

- Determines if this object is an instance of the class represented by the specified Class parameter. Example:

      if (obj.$instanceof(zul.wgt.Label, zul.wgt.Image)) {
      }

  #### Parameters

  - ##### `Rest` ...klass: any[]

    the Class object to be checked. Any number of arguments can be specified.

  #### Returns boolean

  true if this object is an instance of the class

  Inherited from Skipper.$instanceof

### $super

- $super<M, F>(mtd, ...args): ReturnType<F>

- Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

  Example: ```ts multiply: function (n) { return this.$super('multiply', n + 2); } ```

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "skipped" | "skip" | "restore" | "_p"

  - #### F extends any

  #### Parameters

  - ##### mtd: M

    the method name to invoke

  - ##### `Rest` ...args: Parameters<F>

    any number of arguments

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$supers

  Inherited from Skipper.$super

- $super<M, F>(klass, mtd, ...args): ReturnType<F>

- Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

  It is similar to ZKObject.$super, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

  Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function (n) { return this.$super(foo.MyClass, 'multiply', n + 2); } ```

  Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "skipped" | "skip" | "restore" | "_p"

  - #### F extends any

  #### Parameters

  - ##### klass: typeof ZKObject

    the class that invokes this method.

  - ##### mtd: M

    the method name to invoke

  - ##### `Rest` ...args: Parameters<F>

    any number of arguments

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$supers

  #### Since

  5.0.2

  Inherited from Skipper.$super

### $supers

- $supers<M, F>(name, args): ReturnType<F>

- Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

  Example: ```ts multiply: function () { return this.$supers('multiply', arguments); } ```

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "skipped" | "skip" | "restore" | "_p"

  - #### F extends any

  #### Parameters

  - ##### name: M

    the method name to invoke

  - ##### args: Parameters<F>

    an array of arguments. In most case, you just pass `arguments` (the built-in variable).

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$super

  Inherited from Skipper.$supers

- $supers<M, F>(klass, name, args): ReturnType<F>

- Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

  It is similar to zk.Object.$supers, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

  Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function () { return this.$supers(foo.MyClass, 'multiply', arguments); } ```

  Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "skipped" | "skip" | "restore" | "_p"

  - #### F extends any

  #### Parameters

  - ##### klass: typeof ZKObject

    the class that invokes this method.

  - ##### name: M

    the method name to invoke

  - ##### args: Parameters<F>

    an array of arguments. In most case, you just pass `arguments` (the built-in variable).

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$super

  #### Since

  5.0.2

  Inherited from Skipper.$supers

### afterCreated_

- afterCreated_(props?): void

- This function is called after the object is initialized and all its member fields are ready to use.

  #### Parameters

  - ##### `Optional` props: Record<string, unknown> | (() => void)

    the properties passed by constructor.

  #### Returns void

  #### Since

  10.0.0

  Inherited from Skipper.afterCreated_

### afterInit

- afterInit(func): void

- Specifies a function that shall be called after the object is initialized, i.e., after zk.Object.$init is called. This method can be called only during the execution of zk.Object.$init.

  It is an advance feature that is used to allow a base class to do something that needs to wait for all deriving classes have been initialized.

  Invocation Sequence:

  - The most derived class's $init (subclass)
  - The based class's $init (if the derived class's $init invokes this.$supers('$init', arguments))
  - The first function, if any, be added with afterInit, then the second (in the same order that afterInit was called)...

  #### Parameters

  - ##### func: CallableFunction

    the function to register for execution later

  #### Returns void

  #### See

  zk.Object.$init

  #### Deprecated

  as of 10.0 released. Using afterCreated_ instead.

  Inherited from Skipper.afterInit

### get$Class

- get$Class<T>(): T

- #### Type Parameters

  - #### T extends typeof ZKObject

  #### Returns T

  the class of the subsclass which extends from zk.Class.

  #### Since

  10.0.0

  Inherited from Skipper.get$Class

### proxy

- proxy<A, R>(func): ((...args) => R)

- Proxies a member function such that it can be called with this object in a context that this object is not available. It sounds a bit strange at beginning but useful when passing a member of an object that will be executed as a global function.

  Example: Let us say if you want a member function to be called periodically, you can do as follows. ```ts setInterval(wgt.proxy(wgt.doIt), 1000); //assume doIt is a member function of wgt ```

  With proxy, when doIt is called, this references to wgt. On the other hand, the following won't work since this doesn't reference to wgt, when doIt is called. ```ts setInterval(wgt.doIt, 1000); //WRONG! doIt will not be called with wgt ```

  Notice that this method caches the result so that it will return the same proxied function, if you pass the same function again.

  #### Type Parameters

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((...args) => R)

    a method member of this object

    - - (...args): R

      - #### Parameters

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((...args) => R)

  a function that can be called as a global function (that actually have `this` referencing to this object).

  - - (...args): R

    - #### Parameters

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from Skipper.proxy

- proxy<A0, A, R>(func): ((arg0, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, ...args) => R)

    - - (arg0, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, ...args) => R)

  - - (arg0, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from Skipper.proxy

- proxy<A0, A1, A, R>(func): ((arg0, arg1, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, ...args) => R)

    - - (arg0, arg1, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, ...args) => R)

  - - (arg0, arg1, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from Skipper.proxy

- proxy<A0, A1, A2, A, R>(func): ((arg0, arg1, arg2, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A2

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, arg2, ...args) => R)

    - - (arg0, arg1, arg2, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### arg2: A2

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, arg2, ...args) => R)

  - - (arg0, arg1, arg2, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### arg2: A2

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from Skipper.proxy

- proxy<A0, A1, A2, A3, A, R>(func): ((arg0, arg1, arg2, arg3, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A2

  - #### A3

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, arg2, arg3, ...args) => R)

    - - (arg0, arg1, arg2, arg3, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### arg2: A2

        - ##### arg3: A3

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, arg2, arg3, ...args) => R)

  - - (arg0, arg1, arg2, arg3, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### arg2: A2

      - ##### arg3: A3

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from Skipper.proxy

### restore

- restore(wgt, skip): void

- Restores the DOM elements that are detached (i.e., skipped) by skip.

  #### Parameters

  - ##### wgt: Widget<HTMLElement>

    the widget being re-rendered

  - ##### skip: undefined | HTMLElement

  #### Returns void

  Overrides Skipper.restore

### skip

- skip(wgt, skipId?): undefined | HTMLElement

- Skips all or subset of the descendant (child) widgets of the specified widget.

  Notice that the `skipId` argument is not used by zk.Widget#rerender. Rather it is used to simplify the overriding of this method, such that the deriving class can call back this class and to pass a different ID to skip

  If you don't want to pass a different ID (default: uuid + '-cave'), you can ignore `skipId` ```ts Object skip(zk.Widget wgt); ```

  #### Parameters

  - ##### wgt: Widget<HTMLElement>

    the widget being rerendered.

  - ##### `Optional` skipId: string

    the ID of the element where all its descendant elements shall be detached by this method, and restored later by restore. If not specified, `uuid + '-cave'` is assumed.

  #### Returns undefined | HTMLElement

  #### Default Value

  it detaches all DOM elements whose parent element is `jq(skipId || (wgt.uuid + '-cave'), zk)`.

  Overrides Skipper.skip

### skipped

- skipped(wgt, child): boolean

- #### Parameters

  - ##### wgt: Widget<HTMLElement> & {
    caption?: Widget<HTMLElement>;
    }

    the widget to re-render

  - ##### child: Widget<HTMLElement>

    a child (descendant) of this widget.

  #### Returns boolean

  whether the specified child widget will be skipped by skip.

  #### Default Value

      returns if wgt.caption != child. In other words, it skip all children except the caption.

  Inherited from Skipper.skipped

### `Static` isAssignableFrom

- isAssignableFrom(cls): boolean

- Determines if the class by this Class object is either the same as, or is a superclass of, the class represented by the specified Class parameter. Example:

      if (klass1.isAssignableFrom(klass2)) {
      }

  #### Parameters

  - ##### cls: typeof ZKObject

    the Class object to be checked, such as zk.Widget.

  #### Returns boolean

  true if assignable

  Inherited from Skipper.isAssignableFrom

### `Static` isInstance

- isInstance<T>(this, o): o is InstanceType<T>

- Determines if the specified Object is assignment-compatible with this Class. This method is equivalent to [[zk.Object#$instanceof]. Example:

      if (klass.isInstance(obj)) {
      }

  #### Type Parameters

  - #### T extends typeof ZKObject

  #### Parameters

  - ##### this: T

  - ##### o: unknown

    the object to check

  #### Returns o is InstanceType<T>

  true if the object is an instance

  Inherited from Skipper.isInstance