The first time rendering a template works fine. It displays as expected:
When navigating back and navigating to the same screen again, results in the following, where it loses the list formatting:
Why does this happen and how can it be prevented?
Below is the template definition:
<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>
Below is the code that fills the template and navigates to it:
var templateContent = $("#template1").html();
var template = kendo.template(templateContent);
var data = {headers: headers};
$("#screen1").html(template(data));
app.navigate("#screen1");
This is happening because you are replacing the HTML of the View which is not supported. For example the widgets will not be re-initialised after the change.
$("#screen1").html(template(data)); //html replacement of the View's content is not supported
My recommendation is to bind the widget to a DataSource and use its the API methods to change the content. ListView will automatically re-render the template after data change.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.