Kendo UI模板不起作用

时间:2018-10-17 12:03:24

标签: javascript jquery kendo-ui

我们正在尝试将一些远程json数据从AJAX渲染到Kendo UI模板,但没有成功。

<div id="example"></div>

$(document).ready(function() {
    function getCookie(key) {
      var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
      return keyValue ? keyValue[2] : null;
    }
    var token = getCookie('_access_token');
    var userDS = null;
    jQuery.ajax({
      type: "GET",
      contentType: "application/json; charset=utf-8",
      url: "url",            
      dataType: "json",
      headers: { Authorization: "Bearer " + token },
      success: function (data) {
        userDS = data;
        var template = kendo.template("<div>#= name #</div>");
        var data = JSON.stringify(userDS); 
        var result = template(data);
        $("#example").html(result); 
        console.log(data);
      },
      error: function (result) {
        alert("Error");
      }
    });

  });    

我们正在毫无问题地检索数据-已通过console.log(data);测试,结果为:

{
    "id": 1,
    "name": "Full Name",
    "username": "Username",
    "email_verified_at": null,
    "created_at": "2018-10-15 14:03:15",
    "updated_at": "2018-10-15 14:03:15"
}

任何人都可以提供建议/帮助吗?

1 个答案:

答案 0 :(得分:1)

您为什么使用JSON.stringify?它将您的对象转换为字符串。当然,模板引擎无法从中提取任何值。只需删除该行,即可获得模板。

简化的工作示例:

<div id="example"></div>

<script type="text/javascript">
$(document).ready(function() {
    var data = {
        "id": 1,
        "name": "Full Name",
        "username": "Username",
        "email_verified_at": null,
        "created_at": "2018-10-15 14:03:15",
        "updated_at": "2018-10-15 14:03:15"
    };
    var template = kendo.template("<div>#= name #</div>");
    var result = template(data);
    $("#example").html(result); 
}); 
</script>