javascript - 什么时候将 listView itemTemplate 插入到 DOM 中？

Question

我已经按照描述创建了自定义 itemTemplateFunction here .但是我想访问在 DOM 中呈现时定义的属性(例如高度或 clientHeight)。这是为了允许子元素在布局中动态偏移。

我目前研究了两种方法:

• renderComplete - 作为 itemPromise 中的元素返回，然后返回对象。事件按预期触发，但属性(例如高度)没有设置值，因此看起来该项目此时不在 DOM 中。

• setInterval - 尽管这可行，但它是一个糟糕的解决方案，因为我依赖于恒定的时间偏移，理想情况下我不想这样做。

  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;
             })
         }
     });
  };
  

尽管 promise 被传回，但第一个项目的属性仍未最终确定。但是，如果我将 item.ready 的返回包装在超时间隔为 0 的第二个 promise 中，这确实会按预期返回。

       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;
           })
       }

Answer 1

一旦进入 itemPromise.then() 的已完成处理程序，您正在寻找的钩子(Hook)就是 item.ready 属性。

item.ready 本身就是一个 promise，当项目被呈现时它就会实现，此时应该设置所有布局相关的属性。

要使用它，请从第一个完成的 itemPromise.then 处理程序返回 item.ready，然后将另一个 .then(function (item) {} ) 添加到链中。在这个完整的处理程序中，您可以检查属性。

我在免费电子书的第 7 章中对此进行了详细介绍， Programming Windows Store Apps in HTML, CSS, and JavaScript, 2nd Edition ，具体在章节末尾的“模板函数(第 2 部分):优化的项目渲染”部分和多阶段渲染的讨论中。同样的内容还有appeared on the older Windows 8 developer blog ，尽管请注意博客上讨论的“回收占位符”选项仅适用于 WinJS 1.0。