I created a custom itemTemplateFunction as described here . However, I want to access attributes (e.g. height or clientHeight) that are defined when rendering in the DOM. This is necessary to dynamically offset the child in the layout.
I have currently studied two methods:
renderComplete- returns as an item in itemPromise, and then returns the object. The event fires as expected, but the attributes (for example, height) did not have the given values, so it seems that the element is not in the DOM at this stage.setInterval - although it will be a bad decision, because I rely on a constant time offset, which I do not want to do ideally.
function itemTemplateFunction(itemPromise) {
return itemPromise.then(function (item) {
var div = document.createElement("div");
var img = document.createElement("img");
img.src = item.data.picture;
img.alt = item.data.title;
div.appendChild(img);
var childDiv = document.createElement("div");
var title = document.createElement("h4");
title.className += "title";
title.innerText = item.data.title;
childDiv.appendChild(title);
var desc = document.createElement("h6");
desc.innerText = item.data.text;
childDiv.appendChild(desc);
div.appendChild(childDiv);
return {
element: div,
renderComplete: itemPromise.then(function (item){
return item.ready;
}).then(function (item){
var height_a = div.querySelector(".title").clientHeight;
var height_b = WinJS.Utilities.query(".title", div).clientHeight;
})
}
});
};
, , . , , item.ready 0, , .
return {
element: div,
renderComplete: itemPromise.then(function (item){
return WinJS.Promise.timeout(0).then(function () {
return item.ready;
});
}).then(function (item){
var height_a = div.querySelector(".title").clientHeight;
var height_b = WinJS.Utilities.query(".title", div).clientHeight;
})
}