WinJS winControl is undefined

Question

Here is my code,

 var item = document.getElementById("view-zoomedin");
            console.log(item.innerHTML);

            var zoomedInView = document.getElementById("view-zoomedin").winControl;
           
           zoomedInView.addPage("/pages/Content.html", "Content");

in here console.log items are displaying and zoomedInView returns null(document.getElementById("view-zoomedin").winControl  is undefined ) . Why? How to fix it.

Answer 1

OK, how have you defined your "view-zoomedin" in the HTML markup? Is it even a WinJS control to begin with? See this link for more info: http://msdn.microsoft.com/en-us/library/windows/apps/Hh770814.aspx

"This property is valid only for elements that host a Windows Library for JavaScript control. To learn more about Windows Library for JavaScript, see Quickstart: Adding WinJS controls and styles."

---

Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

Answer 2

You must first declare your control in HTML or JavaScript. For example  A listview control declared in HTML is:

<div id="myPageControl" data-win-control="WinJS.UI.ListView"></div>

Then you can access its controls in javaScript like this

var myPageControl = document.getElementById("myPageControl").winControl;

myPageControl.itemDataSource = dataSource;

Answer 3

you must just add WinJS.UI.processAll()  in the ready of your WinJS.UI.Pages.define