数据绑定ListView的ItemTemplate中的Custom HtmlControl失败 [英] Data Bind failing for Custom HtmlControl inside ItemTemplate of ListView

问题描述

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

I have an ItemTemplate which is set on a ListView:

<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时无法绑定连续运行，它工作正常。

The data bindings which are inside the HtmlControl, fails to bind the first time the ListView is shown, on successive runs, it works fine.

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

If I remove the template from the ListView, then the raw data shows up as expected, only upon adding the HtmlControl it fails the first.

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

Any idea what might be wrong?

推荐答案

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

This is because the first time you are loading the control, the page is loaded asynchronously through an XHR (WinJS.xhr) from the package. This means that when the first WinJS.Binding.process() happens in the WinJS.Binding.Template.render function, the actual content isn't loaded. (e.g. it's query selector doesn't see any data-win-bind attributes.

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

The second time, because the fragment you are loading is already in the fragment cache, it actually renders into the DOM synchronously and the WinJS.Binding.Template.render's WinJS.Binding.processAll sees those data-win-bind attributes.

这为您提供了一些选项：

This leaves you with some options:

1. 使用 WinJS.UI.Fragments预加载片段。应用程序启动后立即缓存（），并且在该片段完成之前不要在列表视图中设置数据


2. 仅实例化 HtmlControl 当你的项目被渲染，然后以编程方式实例化 HtmlControl 和 WinJS.Binding.process [全部]（）加载时加载的模板[1]


3. 实际上将模板作为内容，然后加载片段，处理控件。这是EASI呃比它看起来，但可能需要一些时间来思考。简而言之：在片段上加载Fragment，querySelector，用于 data-win-control on， WinJS.UI.process（）它，并将模板实例返回给调用者并将其用作列表视图上的itemTemplate

1. preload the fragment with WinJS.UI.Fragments.cache() as soon as your app starts, and don't set the data on the list view until that fragment completes
2. Only instantiate the HtmlControl when your item has been rendered, and then programmatically instantiate the HtmlControl, and WinJS.Binding.process[All]() the loaded template when it loads [1]
3. Actually make the template your content, and then load the fragment, process the control. This is easier than it looks, but may take some time to think about. In short: Load Fragment, querySelector on the fragment for the element that you have data-win-control on, WinJS.UI.process() it, and return the template instance back to the caller and use that as the itemTemplate on your list view

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

[1] The HtmlControl Constructor takes a 3rd parameter, which is a callback called when the fragment is loaded.

这篇关于数据绑定ListView的ItemTemplate中的Custom HtmlControl失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！