KendoUI MVVM Table of Contents style menu - templates

Question

Been trying to use KendoUI templates and MVVM to create a menu that resembles a table of contents like so:
Lesson 1:
- Slide 1
- Slide 2
Lesson 2:
- Slide 1
and so on. I have the following data that I've created a kendo.observable with:
var CourseData = kendo.observable({
name: 'HTML Test Course',
lessons: [
{ // Lesson 1
name: 'Lesson 1',
slides: [
{ // Slide 1.1
name: 'Animation',
type: 'CreateJS',
cctext: '<p>...</p>',
}
]
}
]
});
Before discovering KendoUI I built the menu using plain JavaScript and for the given data it turns out like this:
<ul>
<li>
<span>Lesson 1</span>
<ul>
<li onclick="Shell.GoToSlide(1, 1)" class="unlocked"><!-- 0 = locked, 1 = unlocked, 2 = viewed, 3 = completed -->
<span>Animation</span>
</li>
</ul>
</li>
</ul>
The two pieces of this puzzle that I am having trouble expressing together are the progress (noted by the class) and the click event. Progress is stored in either a jagged array right in CourseData (like CourseData.progress = [[3]], so CourseData.progress[lesson][slide] will give the progress of that slide.) or if it would better solve this conundrum I would consider moving it to each slide object (like CourseData.lessons[lesson].slides[slide].progress). The click event calls a navigation function written elsewhere that brings up the slides using their lesson and slide number (base 1) and is not added to the item if progress is locked.
With templates, I can do something like the following:
<script type="text/x-kendo-template" id="coursemap-template">
# for (var l = 0; l < lessons.length; l++) { #
<li>
<span>#: lessons[l].name #</span>
<ul>
# for (var s = 0; s < lessons[l].slides.length; s++) { #
<li onclick="Shell.GoToSlide(#: s + 1 #, #: l + 1 #)"><span>#: lessons[l].slides[s].name #</span></li>
# } #
</ul>
</li>
# } #
</script>
To get easy access to the indices of each lesson and slide, but it won't let me bind to a specific element in an array like: data-bind="attr: { class: progress[l][s] }" when Kendo evaluates this binding later it does not know what l and s are, nor can I think of an elegant way to translate the numbers into the appropriate strings. If I use class="#: ['locked','unlocked','viewed','completed'][progress[l][s]] #" it works but does not automatically update when the progress changed. If I used nested templates and made progress a property of slide I could bind to it no problem but then I wouldn't know how to get the lesson and slide indices for the click event without tons of indexOf calls or parent().parent() shenanigans. Thoughts?

Answer 1

Not the ideal solution, but this question has enough views that I suppose I should provide the code I used as a workaround:
View:
<ul id="coursemap"></ul>
ViewModel:
(function () {
for (var l = 0; l < CourseData.lessons.length; l++) {
var lessonItem = document.createElement('li');
$(lessonItem).attr('data-bind', 'html: lessons[' + l + '].name');
$('#coursemap').append(lessonItem);
var slides = document.createElement('ul');
for (var s = 0; s < CourseData.lessons[l].slides.length; s++) {
var slideItem = document.createElement('li');
$(slideItem).attr('data-bind', 'html: lessons[' + l + '].slides[' + s + '].name, attr: { data-progress: progress[' + l + '][' + s + '] }');
(function (lesson, slide) {
$(slideItem).click(function () {
// If the target slide is not locked, navigate.
if ($(this).attr('data-progress') != 0) {
Shell.GoToSlide(slide, lesson);
ExtensionManager.AutoHide();
}
})
})(l + 1, s + 1);
$(slides).append(slideItem);
}
$('#coursemap').append(slides);
}
kendo.bind($('#coursemap'), CourseData);
})();