winControl property is undefined.

Question

Hi Experts!

I have a problem on the following JavaScript code.

document.getElementById("id_test").innerHTML += "<div class=\"class_test test\" data-win-control=\"WinJS.UI.ListView\"></div>";


var control = document.querySelector(".test").winControl;

<div id="id_test" class="class_test" >
</div>

I want to add WinJS.UI.ListView on the id_test tag using JavaScript (not declared on HTML).

But on the above code, control object must be "undefined" (can not access data-win-control).

To access data-win-control, I have to define <div></div> on the HTML?

(or Is there any way to use data-win-control with innerHTML property or insertAdjacentHTML() function?)

Answer 1

I don't think this will work since the HTML isn't being parsed at runtime. You should generate the listview in code and dynamically add it to the DOM.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Hi,

You should be able to do what you want via adding a call to WinJS.UI.processAll() to your code:

WinJS.UI.processAll(document.getElementById("id_test"))
   .then(function() {
      var control = document.querySelector(".test").winControl;

     // here we have control available
   });

Note that you can also create a ListView fully in JavaScript as follows (see http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx):

var object = new WinJS.UI.ListView(parentObject, options);