Kendo UI MVVM - Как перебрать и отобразить коллекцию в представлении?

Question

Я просто пытаюсь перебрать массив внутри моего Kendo.View и попытаться отобразить свойство из этого элемента. Это было бы очень просто в MVC Razor, например.

@foreach(var displayLink in Model) { 
<h1>displayLink.Text</h1> 
} 

Вместо того, чтобы выбирать выдержки, я просто поделился целыми файлами.

Все это выполняется без каких-либо исключений и т. Д. Вид отображает статическое содержимое, но не отображает содержимое цикла. Я включил evalTemplate = true, но до сих пор нет кубиков. Я не смог найти способ сделать это, и это заставило меня замолчать. Все, что я могу найти, это способы подключить ListView для Kendo UI ListView или такой. Я не хочу этого веса, я просто хочу напрямую перебрать массив.

INDEX.HTM (вид):

<div class="jumbotron"> 
    <div class="container"> 
     <h1>Web</h1> 
     <p>The future is <i>now</i>. 
     </p> 
    </div> 
</div> 


# for(var i = 0; i < DashboardLinks.length; i++) { # 
    <h1>#= DashboardLinks[i].TitleText #</h1> 
# } # 

Контроллер:

define(
    // == INTERFACE NAME == 
    "Controllers.IHome", 

    // == DEPENDENCIES == 
    [ 
     "Util.IGetViewSource", 
     "Util.ILayout", 
     "ViewModels.Home.IHomeVM" 
    ], 

    function (/* Dependency injections: */ getViewSource, layout, iHomeVM) 
    { 

     // Define the module. 
     var module = 
      { 
       index: function() { 

        getViewSource("~/App/Views/Home/Index.htm", function (viewSource) { 
         // get the model 
         var viewModel = new iHomeVM(); 
         viewModel.AddDashboardLink("#timecard", "Time Cards", "Manage time cards and get it done.", "time"); 

         // render the view 
         var view = new kendo.View(viewSource, { model: viewModel, evalTemplate: true }); 

         // render the view 
         layout.renderBodyView(view); 
        }); 
       } 
      }; 

     // Return the module. 
     return module; 
    } 
); 

HomeVM:

define(
    // == INTERFACE NAME == 
    "ViewModels.Home.IHomeVM", 

    // == DEPENDENCIES == 
    [ 
     "ViewModels.Shared.ILinkVM" 
    ], 
    function(
     // == DEPENDENCY INJECTIONS == 
     iLinkVM 
    ) { 
     // == CONSTRUCTOR == 
     function HomeVM() { 
      console.log("HomeVM constructor executing."); 


      // == PROPERTIES & METHODS == 
      this.DashboardLinks = []; 


      // Return a copy of this wrapped in Kendo's observable. 
      return kendo.observable(this); 
     } 

     HomeVM.prototype.AddDashboardLink = function(
      href, 
      titleText, 
      descriptionText, 
      iconName) { 
      this.DashboardLinks.push(new iLinkVM(
       href, 
       titleText, 
       descriptionText, 
       iconName 
      )); 
     } 

     // Return the view model module. 
     return HomeVM; 
    } 
); 

LinkVM:

define(
    // == INTERFACE NAME == 
    "ViewModels.Shared.ILinkVM", 

    // == DEPENDENCIES == 
    [ 

    ], 

    function (
     // == DEPENDENCY INJECTIONS == 

    ) 
    { 
     // == CONSTRUCTOR == 
     function LinkVM(href, titleText, descriptionText, iconName) { 
      console.log("LinkVM constructor executing."); 


      // == PROPERTIES & METHODS == 
      this.Href = href; 
      this.TitleText = titleText; 
      this.DescriptionText = descriptionText; 
      this.IconName = iconName; 


      // Return a copy of this wrapped in Kendo's observable. 
      return kendo.observable(this); 
     } 


     // Return the view model module. 
     return LinkVM; 
    } 
); 

Answer 1

Я нашел его: вы можете сделать это с помощью установки свойства "evalTemplate": http://docs.telerik.com/kendo-ui/api/javascript/view#configuration-evalTemplate

// create the view 
    var view = new kendo.View(viewSource, { model: viewModel, evalTemplate: true }); 

Затем вы можете использовать декларативное связывание MVVM, а также привязку к шаблону Kendo, такую ​​как цикл for.

Убедитесь, что вы должным образом избегаете всех своих хэшей ('#'), иначе шаблон будет взорваться.

Answer 2

С первого взгляда, кажется, вы не заметили шагов со своим шаблоном Kendo. В частности, вам необходимо определить шаблон в теге <script type="text/x-kendo-template"> и передать ему данные. Для примера я зачарования, это будет представлено как такой

<script id="myTemplate" type="text/x-kendo-template"> 
    # for (var i = 0; i < data.DashboardLinks.length; i++) { # 
     <h1>#= data.DashboardLinks[i].TitleText #</h1> 
    # } # 
</script> 

Тогда для того, чтобы использовать это, мы можем использовать эти функции Кендо динамически делают наш шаблон - который мы можем привнести в наш DOM

var template = kendo.template($("#myTemplate").html()); // notice id on <script> 

var data = { DashboardLinks: [{TitleText : 'LinkA'}, {TitleText: 'LinkB'}, {TitleText: 'LinkC'}] }; 

var result = template(data); 

Извещение о том, как мы проходим data нашим template(data). Эта функция делает наш шаблон и в самом деле, если мы console.log(result) в этот момент мы видим, наш оказанные шаблон

<h1> LINKA </h1 >
<h1> LinkB </h1 >
<h1> LinkC </h1 >

Тогда можно позвонить по номеру .html(result) внедрить нашу обработанную разметку в наш DOM

Источник: Kendo UI Templates Overview

Рабочий пример: Kendo UI Dojo