Question

尝试使用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]将给出该幻灯片的进度。）或者如果能更好地解决这个难题，我会考虑将其移动到每个幻灯片对象（如CourseData.lessons[lesson].slides[slide].progress）。 click事件调用其他地方编写的导航功能，使用他们的课程和幻灯片编号（基础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]] #"它可以工作，但在进度发生变化时不会自动更新。如果我使用嵌套模板并取得进展幻灯片的属性我可以绑定到它没有问题，但后来我不知道如何获得click事件的课程和幻灯片索引没有吨indexOf调用或parent（）。parent（）恶作剧。想法？

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

KendoUI MVVM目录样式菜单

1 个答案: