我有一个在 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 时它才会首先失败。
知道哪里出了问题吗?
最佳答案
这是因为第一次加载控件时,页面是通过包中的 XHR (WinJS.xhr
) 异步加载的。这意味着当第一个 WinJS.Binding.process()
发生在 WinJS.Binding.Template.render
函数中时,不会加载实际内容。 (例如,它的查询选择器看不到任何 data-win-bind
属性。
第二次,因为您正在加载的片段已经在片段缓存中,所以它实际上同步 和 WinJS.Binding.Template.render
呈现到 DOM 中的 WinJS.Binding.processAll
看到那些 data-win-bind
属性。
这给您留下了一些选择:
- 在您的应用启动后立即使用
WinJS.UI.Fragments.cache()
预加载片段,并且在该片段完成之前不要在 ListView 上设置数据 - 仅在项目呈现后实例化
HtmlControl
,然后以编程方式实例化HtmlControl
,并且WinJS.Binding.process[All]()
加载时加载的模板 [1] - 实际上把模板做成你的内容,然后加载片段,处理控件。这比看起来容易,但可能需要一些时间来考虑。简而言之:加载片段,在片段上为您拥有
data-win-control
的元素查询选择器,WinJS.UI.process()
,然后返回模板实例返回给调用者并将其用作 ListView 中的 itemTemplate
[1] HtmlControl 构造函数采用第三个参数,这是在加载片段时调用的回调。
关于javascript - ListView 的 ItemTemplate 中自定义 HtmlControl 的数据绑定(bind)失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12239619/