WinJS.Class.mix function

Defines a class using the given constructor and the union of the set of instance members specified by all the mixin objects. The mixin parameter list is of variable length.

For more information, see Adding functionality with WinJS mixins.

Syntax

var object = WinJS.Class.mix(constructor);

Parameters

constructor

Type: Function

A constructor function that will be used to instantiate this class.

Return value

Type: Object

The newly defined class.

Remarks

For more information about mixins, see Mixin.

Examples

The following code shows how to create a minimal control (based on the win-star CSS class) on a DIV element and mix WinJS.UI.DOMEventMixin. You can then add an event listener for the click event and respond to it.

WinJS.UI.DOMEventMixin contains methods that implement events that propagate up through the DOM tree. It has three functions: addEventListener, removeEventListener, and dispatchEvent.

To add this mixin to a type you have created, you must set a property named _domElement on the type. This is the field that the WinJS.UI.DOMEventMixin implementation looks for when it raises the event. It becomes the target node for the event.

<div id="div"></div>
<div id="report"></div>
<script type="text/javascript">
    var MyStar = WinJS.Class.define(function (elem) {
            this._domElement = elem;
            this.winControl = this;
            this._numberClicks = 0;
        },
        {
            initialize: function () {
                WinJS.Utilities.addClass(this._domElement, "win-rating");
                this._domElement.innerHTML = "<div class='win-star win-average win-full'></div>";
                var that = this;

               function clickHandler (ev) {
                   var clicks= ++that._numberClicks;
                   document.getElementById("report").innerText = clicks;
               }
               this.addEventListener("click", clickHandler);
        }
            
    });

    WinJS.Class.mix(MyStar, WinJS.UI.DOMEventMixin);

    var star = new MyStar(document.getElementById("div"));
    star.initialize();
</script>

Requirements

Build date: 12/5/2012