javascript - 重用 kendo-ui 模板

Question

第一次渲染模板工作正常。它按预期显示：

当返回并再次导航到同一屏幕时，会导致以下结果，其中会丢失列表格式：

为什么会发生这种情况以及如何预防？

下面是模板定义：

<div data-role="view" data-layout="app" data-title="Time Card" id="screen1">
</div>
<script type="text/x-kendo-template" id="template1">
    Heading
    <ul data-role="listview" data-style="inset" data-type="group"> 
        <ul data-role="listview">
            Group 1
            # for (var i = 0; i < data.headers.length; i++) { #
                <li><a>#= data.heades[i].Item #</a></li>
            # } #
        </ul>
        <ul data-role="listview">
            Group 2
            <li>hello</li>
            <li>goodbye</li>
        </ul>
    </ul>
</script>

下面是填充模板并导航到它的代码：

var templateContent = $("#template1").html();
var template = kendo.template(templateContent);
var data = {headers: headers};
$("#screen1").html(template(data));
app.navigate("#screen1");

Answer 1

发生这种情况是因为您要替换不受支持的视图的 HTML。例如，小部件在更改后不会重新初始化。

$("#screen1").html(template(data)); //html replacement of the View's content is not supported

我的建议是将小部件绑定到 DataSource并使用其API 方法来更改内容。ListView 会在数据更改后自动重新渲染模板。