RatingとspanをViewModelを介してバインドしてみたいと思います。
ViewModelは、JavaScriptでバインド可能なようにしておきます。
var viewModel = WinJS.Binding.as({ averageRating: 5 });
次に、WinJS.UI.processAllの後にデータバインドをします。
WinJS.UI.processAll()
.then(function() {
WinJS.Binding.processAll(null, viewModel);
var rating = document.querySelector("#rating").winControl;
rating.onchange = function (e) {
viewModel.averageRating = e.detail.tentativeRating;
};
});
Ratingコントロールには、ratingというidをふっています。あとはRatingコントロールとspanタグにバインドしておきます。
<divid="rating"data-win-control="WinJS.UI.Rating"data-win-options="{ maxRating: 10 }"data-win-bind="winControl.averageRating: averageRating"></div><spandata-win-bind="textContent: averageRating"></span>
実行するとこんな感じで★がつきます。
★をチェックすると、数字も連動します。
ソース全体
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><linkhref="WinJS/css/ui-light.css"rel="stylesheet" /><scriptsrc="WinJS/js/base.js"></script><scriptsrc="WinJS/js/ui.js"></script><scriptsrc="WinJS/js/WinJS.js"></script><title>こんにちは世界</title></head><body><divid="rating"data-win-control="WinJS.UI.Rating"data-win-options="{ maxRating: 10 }"data-win-bind="winControl.averageRating: averageRating"></div><spandata-win-bind="textContent: averageRating"></span><scripttype="text/javascript"> WinJS.Application.onready = function(){var viewModel = WinJS.Binding.as({ averageRating: 5 }); WinJS.UI.processAll() .then(function(){ WinJS.Binding.processAll(null, viewModel);var rating = document.querySelector("#rating").winControl; rating.onchange = function(e){ viewModel.averageRating = e.detail.tentativeRating;};});}; WinJS.Application.start();</script></body></html>