hello there!
i have 3 views "menu", "details" and "cart" which have a header and a footer. The tabstrip only has 2 tabs : "menu" and "cart".
<div data-role="view" id="menu" data-title="Menu" data-layout="myLayout" data-model="viewModel">
here i have a listview with the category names and when i click on an "li" it goes to the #details view where products are filtered by the category name
</div>
<div id="details" data-role="view" data-title="Details" data-layout="myLayout" data-transition="slide:left" data-model="viewModel" >
<h3 class="item-title">#: name #</h3>
<p class="item-info">#: description #</p>
<a data-role="button" data-item-id="#:id#" class="details-link fa" data-icon="cart" data-bind="click: addToCart" >#: price # lei</a>
</div>
the footer from myLayout looks like this:
<footer data-role="footer">
<div data-role="tabstrip" id="badgeIcon">
<a href="#menu" class="fa" data-icon="home">Menu</a>
<a href="#cart" class="fa" data-icon="cart" >Cart</a>
</div>
</footer>
i have onInit function which works and initializes the badge:
function onInit(e) {
var tabstrip = e.layout.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
tabstrip.badge(1,0);
}
And the addToCart function is this
function addToCart(e) {
var tabstrip = $("#badgeIcon").data("kendoMobileTabStrip");
tabstrip.badge(1, +tabstrip.badge(1) + 1);
....rest of function which works perfectly...
}
The app loads in the #menu view from where it goes to #details view, and then, when i click on a #li it crashes and gives me an error on the " tabstrip.badge(1, +tabstrip.badge(1) + 1); " line
Uncaught TypeError: Cannot call method 'badge' of undefined
If i load the app in the #details view ( index.html#details ) with all the items shown, it works and updates the cart badge, but i want to filter them and thats why i have the #menu view first.
I'm using the latest kendo latest release with jQuery1.9.1
Please give me your input and thanks in advance :)