Kendo UI模板不起作用

Question

We are trying to render some remote json data from AJAX to Kendo UI template but without success.

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

  });    

We are retriving the data without issue - it's tested with console.log(data); and the result is:

{
    "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"
}

Anyone can advice/help please?

Answer 1

Why do you use JSON.stringify ? It turns your object into a string. Of course, the template engine cannot extract any values from it. Simply remove the line and you get your template.

Simplified working example:

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