0

以下のコードは、剣道 UI ウィジェットで RTL と LTR の方向を切り替えるためにmachunから提供されたものです。

コードは次のもので構成されています。

HTML: 剣道オートコンプリート フォームと、RTL および LTR 言語のサポートを有効にするボタン。

脚本：

  • k-rtl クラスのコンテナ
  • データソース (json ファイル)
  • kendo オートコンプリート ウィジェットの初期化 + データの横に画像を表示し、同じタブでデータ リンクを開くためのテンプレート
  • k-rtl クラス

問題は、リンクが正しく開かないことです。URL の末尾に 404 Not Found エラーと /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