Create FullscreenViewModel and bind it to FullscreenWidget via knockout.

Source/Widgets/Fullscreen/FullscreenViewModel.js

@@ -0,0 +1,75 @@
+/*global define*/
+define(['../createCommand',
+        '../../Core/Fullscreen',
+        '../../ThirdParty/knockout'
+        ], function(
+            createCommand,
+            Fullscreen,
+            knockout) {
+    "use strict";
+
+    /**
+     * The ViewModel for {@link FullscreenWidget}.
+     * @alias FullscreenViewModel
+     * @constructor
+     *
+     * @see FullscreenWidget
+     */
+    var FullscreenViewModel = function() {
+        var that = this;
+
+        var isFullscreen = knockout.observable(Fullscreen.isFullscreen());
+        var isFullscreenEnabled = knockout.observable(Fullscreen.isFullscreenEnabled);
+
+        /**
+         * Indicates if fullscreen functionality is possible.
+         * @type Observable
+         */
+        this.isFullscreenEnabled = isFullscreenEnabled;
+
+        /**
+         * Indicates if fullscreen functionality is currently toggled.
+         * @type Observable
+         */
+        this.toggled = isFullscreen;
+
+        /**
+         * The command for toggling fullscreen mode.
+         * @type Command
+         */
+        this.command = createCommand(function() {
+            if (Fullscreen.isFullscreen()) {
+                Fullscreen.exitFullscreen();
+            } else {
+                Fullscreen.requestFullscreen(that.fullscreenElement());
+            }
+        }, isFullscreenEnabled);
+
+        /**
+         * The current button tooltip.
+         * @type Observable
+         */
+        this.tooltip = knockout.computed(function() {
+            if (!isFullscreenEnabled()) {
+                return 'Full screen unavailable';
+            }
+            return isFullscreen() ? 'Exit full screen' : 'Full screen';
+        });
+
+        /**
+         * The HTML element to place into fullscreen mode when the
+         * corresponding button is pressed.  By default, the entire page will
+         * enter fullscreen. By specifying another container, only that
+         * container will be in fullscreen.
+         *
+         * @type {Observable}
+         */
+        this.fullscreenElement = knockout.observable(document.body);
+
+        document.addEventListener(Fullscreen.getFullscreenChangeEventName(), function() {
+            isFullscreen(Fullscreen.isFullscreen());
+        });
+    };
+
+    return FullscreenViewModel;
+});

Source/Widgets/Fullscreen/FullscreenWidget.js

@@ -1,13 +1,15 @@
 /*global define*/
-define(['../../Core/defaultValue',
-        '../../Core/Fullscreen'
+define(['./FullscreenViewModel',
+        '../../Core/DeveloperError',
+        '../../ThirdParty/knockout'
         ], function(
-            defaultValue,
-            Fullscreen) {
+         FullscreenViewModel,
+         DeveloperError,
+         knockout) {
     "use strict";
 
     /**
-     * A single button widget for entering and existing fullscreen mode.
+     * A single button widget for toggling fullscreen mode.
      *
      * @alias FullscreenWidget
      * @constructor
@@ -18,51 +20,31 @@ define(['../../Core/defaultValue',
      *
      * @see Fullscreen
      */
-    var FullscreenWidget = function(container) {
-        var widgetNode;
-
-        if (Fullscreen.isFullscreenEnabled()) {
-            widgetNode = document.createElement('div');
-            widgetNode.className = 'fullscreen';
-            container.appendChild(widgetNode);
-
-            if (Fullscreen.isFullscreen()) {
-                widgetNode.classList.toggle('fullscreen-exit');
-            }
-
-            document.addEventListener(Fullscreen.getFullscreenChangeEventName(), function() {
-                widgetNode.classList.toggle('fullscreen-exit');
-            });
-
-            var that = this;
-            widgetNode.addEventListener('click', function() {
-                if (Fullscreen.isFullscreen()) {
-                    Fullscreen.exitFullscreen();
-                } else {
-                    Fullscreen.requestFullscreen(that.fullscreenElement);
-                }
-            });
+    var FullscreenWidget = function(container, viewModel) {
+        if (typeof container === 'undefined') {
+            throw new DeveloperError('container is required');
         }
 
         /**
-         * Gets or sets HTML element to place into fullscreen mode when the
-         * corresponding button is pressed.  By default, the entire page will
-         * enter fullscreen. By specifying another container, only that
-         * container will be in fullscreen.
+         * Gets the viewModel being used by the widget.
          *
-         * @type {Element}
+         * @type {FullscreenViewModel}
          * @memberof FullscreenWidget
-         * @default document.body
          */
-        this.fullscreenElement = document.body;
+        this.viewModel = typeof viewModel === 'undefined' ? new FullscreenViewModel() : viewModel;
 
         /**
-         * Gets the div created by this widget to represent the fullscreen button.
+         * Gets the actual button created by this widget.
          *
          * @type {Element}
          * @memberof FullscreenWidget
          */
-        this.widgetNode = widgetNode;
+        this.button = document.createElement('button');
+        this.button.className = 'fullscreen';
+        this.button.setAttribute("data-bind", 'attr: { title: tooltip }, css: { "fullscreen-exit": toggled }, click: command, enable: isFullscreenEnabled');
+        container.appendChild(this.button);
+
+        knockout.applyBindings(this.viewModel);
     };
 
     return FullscreenWidget;