【问题标题】:WinJS Repeater table with rows (tr) wrapped in ItemContainer包含在 ItemContainer 中的行 (tr) 的 WinJS 中继器表
【发布时间】:2013-08-02 16:54:20
【问题描述】:

是否可以使用在 ItemContainer 控件中包装行的 Repeater 控件创建表?顺带一提:

    <table id="products">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Description</td>
                    <td>Type</td>
                    <td>Billing Periodicity</td>
                    <td>Average Life Time (in months)</td>
                    <td>Is default</td>
                </tr>
            </thead>
            <tbody id="tableBody" data-win-control="WinJS.UI.Repeater" data-win-bind="winControl.data: products">
                <tr data-win-control="WinJS.UI.ItemContainer">
                    <td data-win-bind="textContent: name"></td>
                    <td data-win-bind="textContent: description"></td>
                    <td data-win-bind="textContent: type"></td>
                    <td data-win-bind="textContent: costPeriodicity"></td>
                    <td data-win-bind="textContent: averageLifeTime"></td>
                    <td data-win-bind="textContent: isDefault"></td>
                </tr>
            </tbody>
        </table>

给定示例在运行时抛出异常:

Unable to get property 'children' of undefined or null reference

我想使用 ItemContainer 的功能来使表格行可点击。我对这个问题的处理方法无效吗?在那种情况下使用 ItemContainer 控件是否错误?

附注 - 如果我将 ItemContainer 控件应用到表格单元格 (td),evertything 会顺利运行(它们的行为类似于 windows8 - 就像可点击的对象)。

【问题讨论】:

  • 这似乎不起作用。 ItemContainer 在插入第一个 td 元素之前添加多个层次结构。你最终得到的是一个无效的表。

标签: microsoft-metro repeater winjs windows-8.1


【解决方案1】:

您错误地为repeater声明了数据源,当您将其更改为时,应将其声明为win-options而不是-win-bind:

 <tbody data-win-control="WinJS.UI.Repeater" data-win-options="{data: products}">

它应该没有问题。

【讨论】:

  • 好的,按照你的方式完成后,我不再遇到运行时异常了。你能解释一下为什么会这样吗?如果我通过 data-win-bind 为转发器声明数据源并从 tr 中删除 ItemContainer,则表会正确呈现(数据绑定有效),但是一旦我将 ItemContainer 放入 tr 中,就会出现异常。我真的很想坚持数据绑定方法,因为我的应用程序依赖于 viewModels(我宁愿绑定到对象的属性,而不是使用 data-win-options 绑定到命名空间中的全局对象)。
  • 您可以尝试将转发器模板指定为外部模板,而不是嵌套在转发器内吗?也许这会有所帮助?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-15
  • 1970-01-01
  • 1970-01-01
  • 2020-01-15
  • 2020-06-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多