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;
},
});