검도 템플릿의 div에 클래스 이름을 동적으로 추가합니다.

div에 동적으로 클래스 이름을 추가하려고하는데이 이름을 '소스'라고합니다. Chrome에서 작동하지만 Internet Explorer 나 Firefox에서는 작동하지 않습니다. 나는 '# source #'을 시도했지만 아직 작동하지 않는다.검도 템플릿의 div에 클래스 이름을 동적으로 추가합니다.

<script type="text/x-kendo-template" id="singleEntryTemplate"> 
     <div class="logEntryRow #: source #"> 
      <span class="entryTime"> 
       #: entryTime # 
      </span> 
     </div> 
</script>

출처

2014-12-18 maxspan

다음 코드 스 니펫으로 시도해보십시오. 드롭 다운에서 "Chai"및 "Chang"옵션을 선택하여 적용된 클래스 효과를 확인하십시오. (일시적으로 나는 단지 2 개의 CSS 수업을 만들었 기 때문에)

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     html { 
      font-size: 12px; 
      font-family: Arial, Helvetica, sans-serif; 
     } 
    </style> 
    <title></title> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" /> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" /> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" /> 

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="example"> 
     <div class="demo-section k-header"> 
      <input id="products" style="width: 400px;" /> 
     </div> 
     <div id="product-preview" class="demo-section k-header"></div> 
    </div> 
    <script id="product-template" type="text/x-kendo-template"> 
    <h4 class="logEntryRow #: ProductName #">ProductName: #: ProductName #</h4> 
    </script> 
    <script> 
     var template = kendo.template($("#product-template").html()); 

     function preview() { 
      var dropdown = $("#products").data("kendoDropDownList"); 

      var product = dropdown.dataSource.get(dropdown.value()); 

      var productPreviewHtml = template(product); 

      $("#product-preview").html(productPreviewHtml); 
     } 


     $("#products").kendoDropDownList({ 
      dataTextField: "ProductName", 
      dataValueField: "ProductID", 
      dataSource: { 
       transport: { 
        read: { 
         url: "http://demos.telerik.com/kendo-ui/service/products", 
         dataType: "jsonp" 
        } 
       }, 
       schema: { 
        model: { 
         id: "ProductID" 
        } 
       } 
      }, 
      dataBound: preview, 
      change: preview 
     }); 
    </script> 
    <style> 
     .Chai { 
      color: red; 
     } 

     .Chang { 
      color: blue; 
     } 

     .logEntryRow { 
      text-decoration: underline; 
     } 
    </style> 
</body> 
</html>

우려 사항이 있으면 알려주십시오.

출처

2014-12-18 02:59:00

나는 대답을 얻었다. 스크립트가 캐시 메모리에서 명확하지 않습니다. 그러나 당신의 대답에 감사드립니다. – maxspan

검도 템플릿의 div에 클래스 이름을 동적으로 추가합니다.

답변

관련 문제