kendo ui 自动完成 - json 文件数据源 - 模板 - 404 未找到错误 - /undefined URL

Question

感谢提供了以下代码，用于在 Kendo UI 小部件中切换 RTL 和 LTR 方向。

代码组成：

HTML: kendo 自动完成表单加上一个按钮来激活对 RTL 和 LTR 语言的支持。

脚本：

k-rtl class 容器
数据源（json 文件）
kendo 自动完成小部件正在初始化 + 用于在数据旁边显示图像并在同一选项卡中打开数据链接的模板
k-rtl class

问题是链接无法正确打开。它显示 404 Not Found 错误加上 URL.

末尾的 /undefined

Live demo

<!DOCTYPE html>
        <html>

        <head>
          <meta charset="utf-8">
          <title>Untitled</title>

          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">

          <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
          <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
          <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
        </head>

        <body>
          <div id="container">
            <input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
            <input id="autocomplete" type="text" />
          </div>

        </body>

        </html>

<script>
    /*------k-rtl class container----------*/
    function createAutoComplete(){
          if($("#autocomplete").data("kendoAutoComplete") != null){
            $("#autocomplete").parent().remove();
            $("#container").append("<input id='autocomplete' type='text' />")
          }
    /*------datasource (json file)---------*/
    var dataSource = new kendo.data.DataSource({
    transport: {
    read: {
    url: "json.txt",
    dataType: "json",
    data: {
    q: "javascript"
    }
    }
    },
    schema: {
    data: "results"
    }
    });
    /*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
          $("#autocomplete").kendoAutoComplete({
                dataSource: dataSource,
                dataTextField: "name",
                template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg"  /></span>' + '<span data-href="#:link#">#:name#</span>',
                select: function(e) {
                    var href = e.item.find("span").data("href");
                    location.assign(href);
                }
            });
     }
    /*------k-rtl class----------*/
     createAutoComplete();
     $('#toggleRTL').on('click', function(event) {
       var form = $('#container');
       console.log(form);
       if (form.hasClass('k-rtl')) {
         console.log("test1");
         form.removeClass('k-rtl')
       } else {
         console.log("test2");
         form.addClass('k-rtl');
       }
       createAutoComplete();
     })
    </script>

Answer 1

我建议先调试您的函数，然后简单地检查变量并确保它包含正确的内容。您忽略了一个简单的事情，即您的 jquery dom 选择器 不太正确导致 var href 包含“未定义".

改变

 var href = e.item.find("span").data("href");

到

var href = e.item.find("span[data-href]").attr("data-href");

看看here

kendo ui 自动完成 - json 文件数据源 - 模板 - 404 未找到错误 - /undefined URL

kendo ui autocomplete - json file datasource - template - 404 Not Found error - /undefined URL

kendo-ui

kendo-autocomplete

kendo-template