0

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

<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() 方法给我一个数据列表。

4

2 回答 2

1

Please try with the below code snippet.

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

Error in below code snippet.

<h4 class="p2">#= Name =</h4>
于 2014-04-16T11:19:51.317 回答
0

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

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

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

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

（用 关闭它#）。

于 2014-04-16T11:17:19.423 回答