Question

我有这样的模板：

<tbody id="departureTemplate" data-win-control="WinJS.Binding.Template">
<tr >
    <td>
        <span data-win-bind="innerText: timezone_scheduled_departure_time "></span> <span class="small" data-win-bind="innerText: flights_joined"></span>
    </td>

    <td>
        <span data-win-bind="innerText: destination_joined"></span> <span class="small" data-win-bind="innerText: airline_names_joined"></span>
    </td>

    <td>
        <span data-win-bind="innerText: remarkstr"></span> Värav <span class="small" data-win-bind="innerText: gate"></span>
    </td>
</tr>
</tbody>

这样的代码：

var departureData = JSON.parse(response.responseText);
var departureBinding = new WinJS.Binding.List(departureData);

var tableBody = document.getElementById("departureTemplate");
var template = document.getElementById("departureTemplate").winControl;

var showItems = 4;
var currentItems = 0;

departureBinding.forEach(function (item) {
    if (currentItems < showItems) {
        template.render(item, tableBody);
    }

    currentItems++;
});

但我的问题是第一个呈现的TR没有数据。其他人渲染得很好。如果我在发送到template.render之前注销数据，则它具有所有需要的值。

知道造成这种行为的原因是什么？

Answer 1

绑定模板（WinJS.Binding.Template控件）旨在与ListView和FlipView控件一起使用。

我建议您查看主题How to use templates to bind data (Windows Store apps using JavaScript and HTML)，该主题演示了这是如何运作的。

使用ListView和一些CSS样式，您应该能够实现与表元素相同的外观，代码更少，灵活性更高。

希望有所帮助。

有关Windows应用商店应用开发的详细信息，请注册App Builder。

Answer 2

理论上这个场景（在某种程度上）你很好。我将单独定义您的模板，因为您的模板表应该是 - 您的模板表并与渲染的实体分开，否则如果您直接渲染模板，则实际上是在破坏模板，这可能是您看到第一行消失的原因由模板数据占用。

只需在表格下方添加：

<table>
    <tbody id="airlineData"></tbody>
</table>

并将您的表体更改为指向新表。

var tableBody = document.getElementById("airlineData");

请告诉我这是否适合您。

第一项为空 - WinJS.Binding.Template

2 个答案: