內容風格的菜單

的KendoUI MVVM表一直在嘗試用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）。點擊事件調用其他地方編寫的導航功能，使用他們的課程和幻燈片編號（基數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（）的click事件的課程和幻燈片索引。parent ）shenanigans。思考？

來源

2014-02-14 CuddleBunny

不是一個理想的解決方案，但這個問題有，我想我應該爲我作爲一個解決方法的代碼足夠的訪問量：

查看：

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

來源

2014-09-11 13:38:22 CuddleBunny

內容風格的菜單

回答

相關問題