Question

我有一个在ListView上设置的ItemTemplate：

<div class="commentTileTemplate" data-win-control="WinJS.Binding.Template">
    <div class="commentTileControl" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/htmlControls/commentTile/commentTile.html'}"></div>
</div>

HtmlControl内部的数据绑定在第一次显示ListView时无法绑定，在连续运行时，它工作正常。

如果我从ListView中删除模板，那么原始数据会按预期显示，只有在添加HtmlControl时它才会失败。

知道可能出现什么问题吗？

Answer 1

这是因为第一次加载控件时，页面是通过程序包中的XHR（WinJS.xhr）异步加载的。这意味着当WinJS.Binding.process()函数中发生第一个WinJS.Binding.Template.render时，不会加载实际内容。（例如，它的查询选择器没有看到任何data-win-bind属性。

第二次，因为您加载的片段已经在片段缓存中，它实际上会同步呈现到DOM ，而WinJS.Binding.Template.render的{{1}}会看到这些WinJS.Binding.processAll属性。

这为您提供了一些选择：

在应用启动后立即使用data-win-bind预加载片段，并且在该片段完成之前不要在列表视图中设置数据
仅在呈现项目时实例化WinJS.UI.Fragments.cache()，然后在加载时以编程方式实例化HtmlControl和HtmlControl加载的模板[1]
实际上将模板作为您的内容，然后加载片段，处理控件。这比看起来容易，但可能需要一些时间来思考。简而言之：在片段上为你有WinJS.Binding.process[All]()的元素加载片段，querySelector，data-win-control它，并将模板实例返回给调用者，并将其用作列表视图上的itemTemplate < / LI>
[1] HtmlControl构造函数接受第3个参数，这是在加载片段时调用的回调。

数据绑定ListView的ItemTemplate中的Custom HtmlControl失败

1 个答案: