剣道グリッドテンプレート - テンプレートのJavaScript変数を使用

Question

私はajax呼び出しに基づいて2つの変数を作成しています。この関数はページの読み込み時に実行され、変数がページが読み込まれると変更されません。

var approvalLevel; 
var fullName; 

$(function() { 
    $.ajax({ 
     type: "GET", 
     async: "false", 
     url: approvalLevelURL, 
     contentType: "application/json", 
     context: this, 
     dataType: "jsonp", 
     crossDomain: true, 
     success: function (data) { 
      getUser(data); 
     } 
    }); 
}); 

function getUser(data) { 
    approvalLevel = data.ApprovalLevel; 
    console.log(approvalLevel); 
    fullName = data.FullName; 
    console.log(fullName); 
}; 

次に、これらの変数を剣道ウィンドウのポップアップテンプレートで使用したいと考えています。ポップアップは私の剣道グリッドの "View Details"コマンドで開き、関数showDetailsはView Detailsのクリックから始まります。デバッガは "wnd.content（detailsTemplate（データ項目））を" 当たったとき

var wnd, detailsTemplate; 
wnd = $("#details") 
        .kendoWindow({ 
         title: "Customer Details", 
         modal: true, 
         visible: false, 
         resizable: false, 
         width: 300 
        }).data("kendoWindow"); 

       detailsTemplate = kendo.template($("#template").html()); 
      }); 

      function showDetails(e) { 
       e.preventDefault(); 

       var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
       wnd.content(detailsTemplate(dataItem)); 
       wnd.center().open(); 
      } 

は残念ながら、エラーがapprovalLevelが定義されていないことを言ってスローされます。

私はこの作業を行うために何をする必要があるのか​​分かりません。私はajax呼び出しからウィンドウの内容をURLにしようとし、 "data.ApprovalLevel"を使用しました。エラーはスローされませんでしたが、値は未定義です。

私は 'wnd.content（detailsTemplate（dataItem、approvalLevel、fullName））'も試してみましたが、どちらも動作しません。

テンプレートは機能を読み取ることはありませんが、剣道データソースの他のフィールドを正しく認識しています。

これは、テンプレートのコードです：

<script type="text/x-kendo-template" id="detailTemplate"> 
<div id="tabs2">    
    <div id="cpTab2"> 
    # if (ChangeControlTypeApprovalLevel == 1) {# 
     <ul> 
      <li><label>Request Review:&nbsp; </label> 
       <p>No initial review required for a level one change</p> 
      </li> 
      <li class="comments"><label>Comments:&nbsp; </label> 
       <p>No initial review required for a level one change</p> 
      </li> 
     </ul> 
    #} else if (Status.toLowerCase().contains("approval")) {# 
      # if (ChangeControlTypeApprovalLevel == 2 && approvalLevel >= 2) {# 
        <ul> 
        <li><label>Request Review:&nbsp; </label> 
         <table id="horizontal-list" class="reviewStatus"> 
          <tr> 
           <td><label> Reviewed By: </label><br/> #= fullName #</td> 
           <td><label> Reviewed Date: </label><br/>#= getToday() #</td> 
           <td><label> Reviewed Status: </label><br/><input name="approved" data-bind="value:approved" class="dropDownApproval" /></td> 
          </tr> 
         </table> 
        </li> 
        <li><label>Comments:&nbsp; </label>    
         <li><textarea type="text" class="k-input k-textbox" name="Comments" data-bind="value:Comments"></textarea></li> 
         <li><button class="k-button" onclick="initialReviewTab">Submit</button></li>      
        </li> 
       </ul> 
      #} # 
    </div> 
</div> 
</script> 

任意の助けいただければ幸いです。私はしばらくの間これに固執してきた。

Answer 1

誰かがこの問題に遭遇した場合、私は解決策を見つけました。私のテンプレートはグローバル変数や関数を受け入れていないので、それぞれの変数と関数のdataItemをshowDetails関数で作成する必要がありました。

function showDetails(e) { 
      e.preventDefault(); 
      var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
      dataItem.approvalLevel = approvalLevel; 
      dataItem.fullName = fullName; 
      dataItem.date = getToday(); 
      wnd.content(detailsTemplate(dataItem)); 
      wnd.center().open(); 
     } 

すべてが美しく機能します。