Kendo Grid模板 - 在模板中使用Javascript变量

我创建了两个基于ajax调用的变量。该函数在页面加载时运行，并且页面加载后变量不会更改。Kendo Grid模板 - 在模板中使用Javascript变量

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

然后我想在我的kendo窗口弹出模板中使用这些变量。该弹出窗口通过我的剑道网格上的“查看详细信息”命令打开，并且函数showDetails从View Details点击开始。

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

不幸的是，当调试器到达的 “wnd.content（detailsTemplate（DataItem的））”，抛出一个错误，指出approvalLevel是不确定的。

我不知道我需要做什么来完成这项工作。我试着让窗口内容从ajax调用中获得url，并使用“data.ApprovalLevel”。该错误未被抛出，但值仍未定义。

我也试过'wnd.content（detailsTemplate（dataItem，approvalLevel，fullName））'，这也不起作用。

该模板不会读取函数，但它正确识别来自kendo数据源的其他字段。

这是模板代码：

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

任何帮助将不胜感激。我一直坚持这一段时间。

来源

2016-12-14 Kellee-Morgan

如果有人遇到这个问题，我找到了解决方案。由于我的模板不接受全局变量或函数，我最终不得不为每个变量和showDetails函数中的函数创建dataItem。

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

现在一切都很好。

来源

2016-12-14 20:27:52

Kendo Grid模板 - 在模板中使用Javascript变量

回答

相关问题