Javascript 如何在视图中迭代和呈现集合？

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

@foreach( var displayLink in Model ) {
 <h1>displayLink.Text</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;
    }
);

链接虚拟机：

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

---

乍一看，你的剑道模板似乎遗漏了一些步骤。具体来说，您需要在

标记中定义模板，并向其传递数据。对于我正在制作的示例，这将被表示为这样

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

#对于（var i=0；i

然后为了使用它，我们可以利用这些剑道函数来动态呈现我们的模板——我们可以将其注入到DOM中

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

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

var result = template(data);

var-template=kendo.template（$（“#myTemplate”）.html（）；//通知id
var data={DashboardLinks:[{TitleText:'LinkA'}，{TitleText:'LinkB'}，{TitleText:'LinkC'}]}；
var结果=模板（数据）；

注意我们如何将

数据

传递到

模板（数据）

。这个函数呈现我们的模板，事实上，如果我们

console.log（result）

此时我们可以看到呈现的模板

链接a
链接b
林克

然后可以调用

.html（result）

将呈现的标记注入DOM

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

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

var result = template(data);

资料来源：

---

工作示例：

我找到了它：您可以通过设置“evalTemplate”属性来实现这一点：

然后可以使用MVVM声明性绑定和剑道模板绑定，例如for循环

---

确保正确地转义了所有哈希（“#”），否则模板将爆炸。

如果它是一个模板就可以了，但这是一个视图。（kendo.View）我想在我的视图中使用此模板功能。在我看来，真的没有办法循环使用数据吗？@AndrewLundgren您找到了另一种方法来实现这一点，而不增加利用模板的复杂性吗？干得好！如果模板化方法有用，我会留下我的答案

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