javascript - ListView 的 ItemTemplate 中自定义 HtmlControl 的数据绑定(bind)失败

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 中的数据绑定(bind)在第一次显示 ListView 时无法绑定(bind)，在连续运行时，它工作正常。

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

知道哪里出了问题吗？

Answer 1

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

第二次，因为您正在加载的片段已经在片段缓存中，所以它实际上同步 和 WinJS.Binding.Template.render 呈现到 DOM 中的 WinJS.Binding.processAll 看到那些 data-win-bind 属性。

这给您留下了一些选择:

1. 在您的应用启动后立即使用 WinJS.UI.Fragments.cache() 预加载片段，并且在该片段完成之前不要在 ListView 上设置数据
2. 仅在项目呈现后实例化 HtmlControl，然后以编程方式实例化 HtmlControl，并且 WinJS.Binding.process[All]() 加载时加载的模板 [1]
3. 实际上把模板做成你的内容，然后加载片段，处理控件。这比看起来容易，但可能需要一些时间来考虑。简而言之:加载片段，在片段上为您拥有 data-win-control 的元素查询选择器，WinJS.UI.process()，然后返回模板实例返回给调用者并将其用作 ListView 中的 itemTemplate

[1] HtmlControl 构造函数采用第三个参数，这是在加载片段时调用的回调。