This is a migrated thread and some comments may be shown as answers.

View with reload=true and a data-model set throws error on 2nd visit.

3 Answers 114 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Alex Smith asked on 22 Oct 2013, 09:57 PM

test.zip

The error thrown is: Uncaught TypeError: Cannot call method 'closest' of undefined.
I have created a simple app to reproduce the behavior.

Attached is the full project with kendo and jQuery dependencies, but I am including the source for search relevance.

index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="js/lib/jquery/jquery.min.js"></script>

<script src="js/lib/kendo/kendo.all.js"></script>

</head>

<body>

<div data-role="layout" data-id="myLayout">

<div data-role="header">

<div data-role="navbar">

<a id="btnBack" class="nav-button" data-align="left" data-role="backbutton">Back</a>

<span data-role="view-title"></span>

<a id="btnOK" class="nav-button" data-align="right" data-role="button" href="page2.html">Next</a>

</div>

<div data-role="view" data-title="Test App" data-layout="myLayout">

Welcome to the app

</div>

<script>

var app = new kendo.mobile.Application(document.body,

{

transition: 'slide'

});

</script>

</body>

</html>

page2.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

<script src="js/app/page2.js"></script>

<div data-role="view" data-layout="myLayout" data-model="p2Model" data-reload="true">

<ul data-role="listview" data-template="listItem" data-bind="source: dsList"></ul>

</div>

<script id="listItem" type="text/x-kendo-template">

#: FirstName # #: LastName #

</script>

</body>

</html>

js/app/page2.js

var p2Model;

if (p2Model == null)

{

p2Model = kendo.observable({

dsList: new kendo.data.DataSource({

data: [{id: 1, FirstName: "Bilbo", LastName: "Baggins"}, {id: 2, FirstName: "Malcolm", LastName: "Reynolds"}]

})

});

}

I set the reload="true" attribute on the root view in page2.html because my desire is to have the page refresh with changes made to the underlying model (p2Model) as well as update the datasource's data. When page2 is visited the first time, everything works as expected. But if you hit the back button in the app, and then visit page2 again, the error is thrown.
What is interesting to note is that if the singleton behavior of the p2Model is removed and it is reconstructed on each page2 visit, then it also works as expected.
However, I desire to have some persistent attributes of the p2Model that could be set while visiting page2 and would not be lost when the page is revisited.
Ideally I could use something like a requireJS module for this, but I have not seen any examples on how to leverage it with remote views.

Are there any examples or best practices on how to leverage modular javascript in remote views? In the Kendo Music Store tutorial it seems to imply that Kendo will automatically load the .js module with the same name as a view (http://docs.kendoui.com/tutorials/Mobile/Kendo%20Mobile%20Music%20Store/kendo-mobile-music-store-organization#js-file-per-view) but I have not observed this working with a remote view like page2.html. Or perhaps my understanding of requireJS is incorrect.

Thanks

View with reload=true and a data-model set throws error on 2nd visit.

3 Answers, 1 is accepted