Question

我为我的kendoUI DataSource编写了一个模板，如下所示：

<script id="SmallGalleryTemplate" type="text/x-kendo-template">



           <div style="width: 30%; float:left; margin-left: 55px; margin-bottom: 5%; margin-right: 8%">
                    <h4 class="p2">#= Name =</h4>
                    <figure>
                        <a href=ProductDetail.aspx?id=#= ID #>
                            <img class="img-border" src="images/Product/#= img #"/></a>
                    </figure>
                    <div class="box">
                        <div class="padding">
                            <a href=ProductDetail.aspx?id=#= ID #>Read more</a>
                        </div>
                    </div>
            </div>

    </script>

我有：

  <script>

        $(document).ready(function () {

            var template = kendo.template($("#SmallGalleryTemplate").html());

            var datas = function () {

                var objects = [];
                $.ajax({
                    type: "POST",
                    url: "./Product.aspx/ProductGetAll",
                    data: {},
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success:
                        function (response) {

                            for (var i = 0; i < response.d.length; i++) {

                                objects.push({ 'ID': response.d[i].PRODUCT_ID, 'img': response.d[i].PRODUCT_PHOTO_PATH, 'Name': response.d[i].PRODUCT_NAME });

                            }
                        },

                });
                return objects;
            };


            var dataSource = new kendo.data.DataSource({
                data: datas(),

                change: function () {
                    $("#SmallGalleryInner").html(kendo.render(template, this.view()));
                }
            });


            dataSource.read();


        });

    </script>

但它不起作用并给我一个错误：

Microsoft JScript运行时错误：模板无效

问题是什么？

注意：ProductGetAll（）方法给我一个数据列表。

Answer 1

请尝试使用以下代码段。

<script id="SmallGalleryTemplate" type="text/x-kendo-template">
            <div style="width: 30%; float:left; margin-left: 55px; margin-bottom: 5%; margin-right: 8%">
                     <h4 class="p2">#= Name #</h4>
                      <figure>
                        <a href=ProductDetail.aspx?id=#= ID #>
                            <img class="img-border" src="images/Product/#= img #"/></a>
                      </figure>
                      <div class="box">
                        <div class="padding">
                            <a href=ProductDetail.aspx?id=#= ID #>Read more</a>
                        </div>
                    </div>
            </div>
    </script>
    <script>

        $(document).ready(function () {

            myobjects = new Array();
            for (var i = 0; i < 5; i++) {

                var test = new Object();
                test.ID = i;
                test.img = "img" + i;
                test.Name = "name" + i;
                myobjects.push(test);
            }



            template = kendo.template($("#SmallGalleryTemplate").html());

            var dataSource = new kendo.data.DataSource({
                data: myobjects,

                change: function () {

                    $("#SmallGalleryInner").html(kendo.render(template, myobjects));

                }
            });


            dataSource.read();


        });

    </script>

以下代码段中的错误。

<h4 class="p2">#= Name =</h4>

Answer 2

问题是关闭模板中对Name的引用。你写道：

<h4 class="p2">#= Name =</h4>

（使用=关闭它），它应该是：

<h4 class="p2">#= Name #</h4>

（用#关闭它。）

KendoUI数据源模板

2 个答案: