0

幸好machun提供了以下代码，用于在 Kendo UI 小部件中在 RTL 和 LTR 方向之间切换。

代码包括：

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

脚本：

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

问题是链接无法正确打开。它显示 404 Not Found 错误以及 URL 末尾的 /undefined。

现场演示 

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

1 回答 1

0

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

改变

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

至

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

看看这里

于 2015-10-30T03:31:30.920 回答