This question is locked. New answers and comments are not allowed.
We recently upgraded the kendo mobile framework on our app from 2013.2.729 to 2014.3.1416
In the app we have a drawer containing a listview that is now throwing very generic "TypeError: undefined is not a function" error when binding. Here is the setup -- What could be wrong here? I've tried binding declaratively and programmatically (using this syntax $("#ulAlertBuckets").kendoMobileListView({...) but any way I try gives the same result. Any insight would be greatly appreciated!
Relevant Markup:
<div id="drawerAlertInboxes"
class="Drawer"
data-role="drawer"
data-before-show="app.AlertInboxesDrawer.BeforeShow"
data-show="app.AlertInboxesDrawer.Show"
data-hide="app.AlertInboxesDrawer.Hide"
data-views='["viewAlertsList", "Views/AlertsMap.html"]'>
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title">Alert / Message Inboxes</span>
</div>
</div>
<div data-role="content">
<ul id="ulAlertBuckets"
data-role="listview"
data-bind="source: GetAvailableAlertBuckets"
data-template="templateAlertBucketsDrawer">
</ul>
</div>
</div>
<script type="text/x-kendo-template" id="templateAlertBucketsDrawer">
<li><a class="km-listview-link" data-bind="click: AlertBucketClicked, html:Text"></a></li>
</script>
View Script:
View Model:
In the app we have a drawer containing a listview that is now throwing very generic "TypeError: undefined is not a function" error when binding. Here is the setup -- What could be wrong here? I've tried binding declaratively and programmatically (using this syntax $("#ulAlertBuckets").kendoMobileListView({...) but any way I try gives the same result. Any insight would be greatly appreciated!
Relevant Markup:
<div id="drawerAlertInboxes"
class="Drawer"
data-role="drawer"
data-before-show="app.AlertInboxesDrawer.BeforeShow"
data-show="app.AlertInboxesDrawer.Show"
data-hide="app.AlertInboxesDrawer.Hide"
data-views='["viewAlertsList", "Views/AlertsMap.html"]'>
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title">Alert / Message Inboxes</span>
</div>
</div>
<div data-role="content">
<ul id="ulAlertBuckets"
data-role="listview"
data-bind="source: GetAvailableAlertBuckets"
data-template="templateAlertBucketsDrawer">
</ul>
</div>
</div>
<script type="text/x-kendo-template" id="templateAlertBucketsDrawer">
<li><a class="km-listview-link" data-bind="click: AlertBucketClicked, html:Text"></a></li>
</script>
View Script:
app.AlertInboxesDrawer =
{
ViewModel:
new
AlertInboxesViewModel(),
PreventSwipeOpen:
false
,
BeforeShow:
function
(drawerBeforeShowEvent)
{
if
(app.AlertInboxesDrawer.PreventSwipeOpen) {
drawerBeforeShowEvent.preventDefault();
}
else
{
kendo.bind(drawerBeforeShowEvent.sender.element.find(
"#ulAlertBuckets"
), app.AlertInboxesDrawer.ViewModel);
}
},
Show:
function
(drawerShowEvent) {
console.log(
"app.AlertInboxesDrawer.PreventSwipeOpen: "
+ app.AlertInboxesDrawer.PreventSwipeOpen);
app.ShowViewCover();
app.AlertInboxesDrawer.PreventSwipeOpen =
false
;
},
Hide:
function
()
{
app.RemoveViewCover();
},
};
View Model:
var
AlertInboxesViewModel = kendo.data.ObservableObject.extend(
{
GetAvailableAlertBuckets:
function
()
{
var
alertBuckets =
new
kendo.data.ObservableArray([]);
for
(
var
alertBucketKey
in
Constants.AlertBuckets)
{
var
pushIt =
false
;
if
(alertBucketKey ==
"Group"
)
{
pushIt = app.Settings.DeviceRegistration.IsLoggedIn();
}
else
if
(alertBucketKey ==
"MyOrganization"
)
{
pushIt = app.Settings.DeviceRegistration.IsNotifierLoggedIn();
}
else
if
(alertBucketKey ==
"CurrentLocation"
)
{
pushIt = app.Settings.AlertPreferences.HasCurrentLocation();
}
else
{
pushIt =
true
;
}
if
(pushIt)
{
var
alertBucket =
new
kendo.data.ObservableObject(
{
Key: alertBucketKey,
Text: Constants.AlertBuckets[alertBucketKey].Text,
AlertBucketClicked:
function
(clickEvent) {
var
whichBucket = clickEvent.data.get(
"Key"
);
app.AlertsList.ViewModel.set(
"AlertBucket"
, Constants.AlertBuckets[whichBucket]);
$(clickEvent.currentTarget).closest(
'div[data-role="drawer"]'
).data(
"kendoMobileDrawer"
).hide();
},
});
alertBuckets.push(alertBucket);
}
}
return
alertBuckets;
},
});