Как добавить на страницу WinJS-компонент для отображения рейтинга

Для того чтобы добавить на страницу WinJS компонент нужно использовать атрибут data-win-control и тег div.

Добавим в default.html следующий код:
<div id="rating" data-win-control="WinJS.UI.Rating"></div>

Весь код страницы:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Recipe3.1</title>
 <!-- WinJS references -->
 <link href="WinJS/css/ui-light.css" rel="stylesheet" />
 <script src="WinJS/js/base.js"></script>
 <script src="WinJS/js/ui.js"></script>
 <!-- Recipe3.1 references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body class="win-type-body">
 <div id="rating" data-win-control="WinJS.UI.Rating"></div>
</body>
</html>

В секции head обязательно должны быть подключены следующие файлы:
<link href="WinJS/css/ui-light.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>

Чтобы переключиться со светлой на темную тему надо изменить ui-light.css на ui-dark.css.

Компонент не отображается до тех пор пока не будет вызван метод WinJS.UI.processAll. Этот метод может быть найдет в файле js/default.js.


Атрибут data-win-options используется для установки дополнительных свойств компоненту.
<div id="rating" data-win-control="WinJS.UI.Rating"
data-win-options="{maxRating:4,enableClear:false}">
 </div>

Для того чтобы динамически добавлять компоненты на страницу нужно сначала сделать тег div в default.html:
<div id="rating" >
 </div>

Дальше нужно создать файл js/controldemo.js и добавить в него следующий код:

(function () {
 "use strict";
 function AddControl()
 {
var ratingDiv = document.getElementById("rating");
var ratingCtrl = new WinJS.UI.Rating(ratingDiv);
ratingCtrl.maxRating = 4;
 }
 document.addEventListener("DOMContentLoaded", AddControl);
})();

Далее нужно в default.html подключить js/controldemo.js:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Recipe3.3</title>
 <!-- WinJS references -->
 <link href="WinJS/css/ui-light.css" rel="stylesheet" />
 <script src="WinJS/js/base.js"></script>
 <script src="WinJS/js/ui.js"></script>
 <!-- Recipe3.3 references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
 <script src="/js/controldemo.js"></script>
</head>
<body class="win-type-body">
 <div id="rating">
 </div>
</body>
</html>

Для того чтобы получить компонент со страницы надо воспользоваться свойство winControl у DOM-элемента. Добавим в js/controldemo.js следующий код:
(function () {
 "use strict";
 function GetControl() {
WinJS.UI.processAll().done(function () {
var ratingControl = document.getElementById("rating").winControl;
ratingControl.userRating = 2;
});
 }
 document.addEventListener("DOMContentLoaded", GetControl);
})();


Теги: