一旦您获取了与 HTML5 元素相关联的控件后，就可以使用 winControl 属性获取该控件：
双击代码全选
|
1
2
|
var datePicker = datePickerDiv.winControl; // Magical well-known property name
datePicker.current = "5/5/1995"; // Now we're talking to the control
|
此外，一旦您获取了该控件后，就可以返回到具有元素属性的关联的 HTML5 元素：
双击代码全选
|
1
2
3
|
var datePickerDiv = datePicker.element;
datePickerDiv.style.display = "none";
// Now we're talking to the HTML element
|
除了允许以编程方式进行创建以外，每个控件还通过 data-win-control 和 data-win-options 属性提供声明性创建方式，正如我们所看到的：
双击代码全选
|
1
2
3
|
<div id="datePicker2"
data-win-control="WinJS.UI.DatePicker" data-win-options=
"{current: '6/2/1969'}" ></div>
|
data-win-control 属性是要调用的构造函数的名称。与在要求调用 WinJS.Binding.processAll 以便对 data-win-bind 属性进行分析（参见我们之前的文章）的数据绑定中一样，data-win-control 属性需要调用 WinJS.UI.processAll 以便对其进行分析以及创建控件。因此，您将在所有生成的项目模板代码中都看到对 WinJS.UI.processAll 的调用。
data-win-options 字符串被分析为功能较弱的 JavaScript 对象初始化语法。例如，您将注意到我们直接传递了该字符串，而不是通过创建 Date 对象为 DatePicker 控件设置当前选项。其原因在于，选项分析器不理解“new”关键字 — 它只处理静态数据。但是，因为 DatePicker 和其他 WinJS 控件应该以声明方式创建，所以，针对选项分析器的限制（在此例中针对 DatePicker）对它们特别放宽了要求，这意味着采用一个字符串并且将其分析为供您使用的 Date 对象。
每个控件都具有不同的选项集，并且我们将告知您要参考的文档，以便了解哪些控件具有哪些选项。图 6 显示了内置 WinJS 控件的列表。
图 6 WinJS 控件
图 7 显示运行中的 WinJS 控件。
图 7 运行中的 WinJS 控件
您可以在您的 Windows 应用商店应用程序中任意组合和搭配 HTML5 控件、WinRT 控件和 WinJS 控件。
或者，如果您在 HTML5、Windows Runtime 或 WinJS 提供的列表上找不到想要的控件，则可以构建您自己的控件。
自定义控件
如前所述，WinJS 控件只是提供以下形式的构造函数的一种函数：
双击代码全选
|
1
|
function MyControl(element, options) {...}
|
构建此类控件就是实现一个函数以便在作为第一个参数传入的父元素下创建该 HTML，并且使用作为第二个参数传入的选项对象。例如，假设我们想要构建一个很小的时钟控件，如图 8 中所示。
图 8 自定义时钟控件
假设我们将 div 设置为包含我们的时钟控件：
双击代码全选
|
1
|
<div id="clockControl1"></div>
|
与内置 WinJS 控件一样，我们想要能够创建一个自定义控件的示例，如下所示：
双击代码全选
|
1
2
|
var clock = new Samples.UI.ClockControl(clockControl1, { color: 'red' });
clock.color = 'red'; // Can set options as part of construction or later
|
我们为该自定义控件挑选的名称是来自 Samples.UI 命名空间的 ClockControl。与之前一样，创建该控件就是传入包含元素 (clockControl1) 以及选项的名称/值对的可选集合。如果以后在该控件的生存期中我们想要更改该控件的选项之一，我们应该能够通过设置单独的属性值来这样做。
我们还想要能够以声明方式创建自定义控件：
双击代码全选
|
1
2
3
4
5
6
|
<script src="/js/clockControl.js"></script>
...
<div id="clockControl2"
style="width: 200px; height: 200px;"
data-win-control="Samples.UI.ClockControl"
data-win-options="{color: 'red'}"> </div>
|
在实现过程中，我们想要确保设置 winControl 和元素属性，确保私有成员被适当标记并且可以相应处理事件。在我们深入探讨该 ClockControl 的实现方式时，我们将介绍 WinJS 是如何帮助我们实现这些功能的。
控 件类首先，我们将需要确保 ClockControl 处于正确的命名空间中。大多数流行语言都具有命名空间的概念，作为将类型、函数和值分隔成单独的命名区域以免发生冲突的一种方法。例如，如果 Microsoft 在 WinJS 2.0 中提供 ClockControl 类型，它将位于 WinJS.UI 命名空间中，以便不会与 Samples.UI 冲突。在 JavaScript 中，命名空间只是具有构造函数、函数和值的另一个对象，您可以按如下所示进行填充：
双击代码全选
|
1
2
3
4
5
6
7
8
9
|
// clockControl.js
(function () {
// The hard way
window.Samples = window.Samples || {};
window.Samples.UI = window.Samples.UI || {};
window.Samples.UI.ClockControl =
function(element, options) { ...
};
})();
|
这将会顺利运行。但是，定义命名空间（以及嵌套命名空间）很简单，WinJS（像许多 JavaScript 库一样）提供一个快捷方式：
(责任编辑：12图资源库)
