5

我只是想在我的 Kendo.View 中循环一个数组并尝试从元素中呈现一个属性。这在 MVC Razor 中非常简单,例如

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

我没有选择摘录,而是分享了整个文件。

这一切都运行,没有例外等。视图呈现静态内容,但不呈现循环的内容。我打开了evalTemplate = true,但仍然没有骰子。我一直无法找到任何方法来做到这一点,这让我发疯。我能找到的只是连接 Kendo UI ListView 等的方法。我不想要那个重量,我只想直接遍历数组。

索引.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;
    }
);

家庭虚拟机:

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

链接虚拟机:

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

2 回答 2

2

乍一看,您似乎在使用剑道模板时遗漏了一些步骤。具体来说,您需要在<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>

然后为了使用它,我们可以利用这些 Kendo 函数来动态渲染我们的模板——我们可以将其注入到我们的 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 模板概述

工作示例:Kendo UI Dojo

于 2015-05-13T22:14:47.630 回答
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 循环。

确保你正确地转义了所有的哈希('#'),否则模板会爆炸。

于 2015-05-18T19:58:26.293 回答