javascript - Kendo UI 模板不起作用

Question

我们正在尝试将一些远程 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"
}

有人可以提供建议/帮助吗？

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