javascript - kendo template mvvm

Kendo UI MVVM: ¿cómo iterar y representar una colección dentro de una vista?

Question

Simplemente estoy intentando recorrer una matriz dentro de mi Kendo.View e intento renderizar una propiedad del elemento. Esto sería muy simple en MVC Razor, por ejemplo

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

En lugar de elegir extractos, acabo de compartir los archivos completos.

Todo esto se ejecuta, sin excepciones, etc. La vista representa el contenido estático pero no representa el contenido del ciclo. evalTemplate = true , pero todavía no hay dados. No he podido encontrar ninguna manera de hacer esto y me está volviendo loco. Todo lo que puedo encontrar es formas de conectar un UView ListView de Kend UI o tal. No quiero ese peso, solo quiero recorrer el conjunto directamente.

Index.htm (ver):

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

Controlador:

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

A primera vista, parece que le faltan algunos pasos con su plantilla de Kendo. Específicamente, debe definir una plantilla en una etiqueta <script type="text/x-kendo-template"> y pasarle datos. Para el ejemplo que estoy elaborando, esto se representaría como tal

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

Luego, para usar esto, podemos aprovechar estas funciones de Kendo para renderizar dinámicamente nuestra plantilla, que podemos inyectar en nuestro DOM

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

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

var result = template(data);

observe cómo pasamos los data a nuestra template(data) . Esta función representa nuestra plantilla y de hecho si console.log(result) en este punto vemos nuestra plantilla renderizada

<h1> LinkA </ h1>
<h1> LinkB </ h1>
<h1> LinkC </ h1>

Entonces es posible llamar a .html(result) para inyectar nuestro marcado prestado en nuestro DOM

Fuente: Descripción general de las plantillas de interfaz de usuario de Kendo

Ejemplo de trabajo: Kendo UI Dojo

Answer 2

Lo encontré: puedes hacerlo estableciendo la propiedad "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 });

Luego puede usar el enlace declarativo de MVVM y también el enlace de plantilla de Kendo, como un bucle for.

Asegúrate de que estás escapando correctamente de todos tus hashes (''#''), de lo contrario, las plantillas explotarán.