I am working on tizen web app by using caphList. I am using ajax to fetch data from api and after getting response I set in caphlist by this code:
// Reset container before set data
$('#sub_cate_list').html("");
$('#sub_cate_list').caphList({
items : items,
template: 'sub-cate-template',
containerClass : 'list',
direction: 'vertical',
initialItemIndex: 0,
onFocusItemView: function(context) {
// Assign inner category index
SUB_CAT_INDEX = {rowIndex: context.rowIndex, itemIndex: context.itemIndex};
}
});
Before setting data in caphlist i am using html() method of jquery to reset the container and it's working fine But when i click on another category to load same ui but new category data then focus in not working.
Code to set focus:
$.caph.focus.activate();
let controllerProvider = $.caph.focus.controllerProvider.getInstance();
controllerProvider.setDepth(0);
controllerProvider.focus(0);
Caphlist Template:
<div class="shows_container_list" id="sub_cate_list"></div> <!-- container element -->
<!-- template view -->
<script id="sub-cate-template" type="text/template">
<div class="home_listbox item" focusable data-focusable-initial-focus="<%=(index===0)?true:false%>" data-focusable-depth="1">
<div class="shows_innerbox">
<div class="shows_box" data-uri="<%= item.uri %>">
<img src="<%= item.image %>">
<div class="shows_textlist text_bright"><%= item.text %></div>
</div>
</div>
</div>
</script>
So i think destroy method of caphlist will work but i do not know how to use this. So could someone please suggest how to use destroy method?
What i want to do:
I have two category "today" and "tomorrow" and when i click first time on "today" or "tomorrow" then on next screen focus is working properly but after coming back to category screen and again if i click on "today" and "tomorrow" then on next screen focus in not working.
If anyone think I am not doing in right way please suggest.
Thank you