Kendo UI MVVM 目录样式菜单答案

【问题标题】：KendoUI MVVM Table of Contents style menuKendo UI MVVM 目录样式菜单
【发布时间】：2014-02-14 21:28:21
【问题描述】：

一直在尝试使用 KendoUI 模板和 MVVM 创建类似于目录的菜单，如下所示：

Lesson 1:
    - Slide 1
    - Slide 2
Lesson 2:
    - Slide 1

等等。我有以下数据，我创建了一个 kendo.observable：

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

在发现 KendoUI 之前，我使用纯 JavaScript 构建了菜单，对于给定的数据，结果如下：

<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>

这个难题的两个部分我无法一起表达是进度（由班级注意到）和点击事件。进度存储在 CourseData 中的锯齿状数组中（如 CourseData.progress = [[3]], 所以 CourseData.progress[lesson][slide] 将给出该幻灯片的进度。）或者如果它可以更好地解决这个难题，我会考虑将它移动到每个幻灯片对象（如 @987654326 @)。点击事件调用在其他地方编写的导航函数，该函数使用它们的课程和幻灯片编号（以 1 为基数）显示幻灯片，如果进度被锁定，则不会添加到项目中。

使用模板，我可以执行以下操作：

<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>

为了轻松访问每节课和幻灯片的索引，但它不允许我绑定到数组中的特定元素，例如：data-bind="attr: { class: progress[l][s] }" 当 Kendo 稍后评估此绑定时，它不知道 l 和 s 是什么是，我也想不出一种优雅的方式将数字转换为适当的字符串。如果我使用class="#: ['locked','unlocked','viewed','completed'][progress[l][s]] #"，它可以工作，但不会在进度更改时自动更新。如果我使用嵌套模板并取得了幻灯片的属性，我可以毫无问题地绑定到它，但是如果没有大量 indexOf 调用或 parent().parent( ) 恶作剧。想法？

【问题讨论】：

标签： templates data-binding mvvm menu kendo-ui

【解决方案1】：

不是理想的解决方案，但这个问题有足够的观点，我想我应该提供我用作解决方法的代码：

查看：

<ul id="coursemap"></ul>

视图模型：

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

【讨论】：