Kendo TabStrip 및 Kendo Templates

Question

Tabstrip을 클릭 할 때마다 KENDO 템플릿을 동적으로로드해야합니다. 모든 탭의 데이터 소스는 동일합니다. 나는 아래와 같이 그것을하려고 노력하고있다. 그러나 그 does not는 일한다. 알려 주시기 바랍니다. (검도 탭 표시 줄 및 검도 템플릿)

<div class="tabs-details-wrapper" id="Tab1"> 
    <ul> 
     <li class="k-state-active" >Identification</li> 
     <li>Planning</li> 
     <li>Implementation</li> 
     <li>Review</li> 
     <li>Management Response</li> 
    </ul> 

    <div> 
     <div class="row"> 
      <div class="col-xs-12 col-md-5"> 
       <div class=""> 
        <div class="form-horizontal" ></div> 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 

<script id="details-templateTab1" type="text/x-kendo-template"> 
    <div class="form-group"> 
     <label class="col-xs-12 col-md-4 control-label">Year of Completion</label> 
     <div class="col-xs-12 col-md-8"> 
      <span class="control-readonly"></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-xs-12 col-md-4 control-label">Title</label> 
      <div class="col-xs-12 col-md-8"> 
       <span class="control-readonly"></span> 
      </div> 
     </div> 
    </script> 
    <script id="details-templateTab2" type="text/x-kendo-template"> 

     <div class="form-group"> 
       <label class="col-xs-12 col-md-4 control-label">Hello1</label> 
       <div class="col-xs-12 col-md-8"> 
        <span class="control-readonly"> 
        </span> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label class="col-xs-12 col-md-4 control-label">Title1</label> 
       <div class="col-xs-12 col-md-8"> 
        <span class="control-readonly"> 
        </span> 
       </div> 
     </div> 
    </script> 


$(".tabs-details-wrapper").kendoTabStrip({ 
    select: function (e) { 
     //var data = this.dataSource.at($(e.item).index()); 
     var templateSelector = "" 
     // alert(e); 
     if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html()) 
     else templateSelector = kendo.template($("#details-templateTab2").html()) ; 
     // alert(e.contentElement); 

     //templateSelector = kendo.template($("#details-templateTab1").html()); 
     $(e.contentElement).html(templateSelector); 
     // kendo.bind(e.contentElement, data); 
     // $(e.contentElement).html(template(this.dataSource.at($(e.item.innerText).index()))) 
    }, 
        // template: $("#details-templateTab1"), 
        animation: false 
        //dataSource: ds 
        // dataSource: ds, 
}); 

Answer 1

나는 당신의 문제를 돕기 위해 jsBin를 시작했습니다. 각 탭을 클릭하면 당신과 같은 콘텐츠를로드합니다. 코드에 추가 할 데이터 소스 자바 스크립트 객체가 있습니까?

자세한 정보가 필요합니다.

$(".tabs-details-wrapper").kendoTabStrip({ 
    select: function (e) { 
     //var data = this.dataSource.at($(e.item).index()); 
     var templateSelector = "" 
     // alert(e); 
     if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html()) 
     else templateSelector = kendo.template($("#details-templateTab2").html()) ; 
     // alert(e.contentElement); 

     //templateSelector = kendo.template($("#details-templateTab1").html()); 
     $(e.contentElement).html(templateSelector); 
     // kendo.bind(e.contentElement, data); 
     // $(e.contentElement).html(template(this.dataSource.at($(e.item.innerText).index()))) 
    }, 
        // template: $("#details-templateTab1"), 
        animation: false 
        //dataSource: ds // what is your DS? 
        // dataSource: ds, 
}); 

Answer 2

문제는 데이터 소스에서 "dataContentField"를 정의하지 않는다고 생각합니다. 데이터 소스와 함께이 기능을 추가하고 나면 select 함수에서 동적 결과를보기 시작했습니다.

은 여기 내 자바 스크립트

$(".tabs-details-wrapper").kendoTabStrip({ 
    select: function (e) { 
      var templateSelector = "" 
      if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html()) 
      else templateSelector = kendo.template($("#details-templateTab2").html()); 
      $(e.contentElement).html(templateSelector(this.dataSource.at($(e.item).index()))) 
    }, 
    animation: false, 
    dataTextField: "Name", 
    dataContentField: "Content", 
    dataSource: [ 
     { Name: "Identification", YearOfCompletion: "1998", Title: "This is first title", Content: "", customMessage: "This is custom message 1" }, 
     { Name: "Planning", YearOfCompletion: "1999", Title: "This is second title", Content: "", customMessage: "This is custom message 2" }, 
     { Name: "Implementation", YearOfCompletion: "2000", Title: "This is third title", Content: "", customMessage: "This is custom message 3" }, 
     { Name: "Review", YearOfCompletion: "2001", Title: "This is fourth title", Content: "", customMessage: "This is custom message 4" }, 
     { Name: "Management Response", YearOfCompletion: "2002", Title: "This is fifth title", Content: "", customMessage: "This is custom message 5" } 
    ] 

}); 

그것은 정말 문제 이것은 선택에 대체하기 때문에 내가는 dataSource의 content 속성에 넣어 무엇을하지 않았다입니다. 여기

는

<div class="tabs-details-wrapper" id="Tab1"></div> 
<script id="details-templateTab1" type="text/x-kendo-template"> 
<div class="form-group"> 
    <label class="col-xs-12 col-md-4 control-label">Year of Completion</label> 
    <div class="col-xs-12 col-md-8"> 
     <span class="control-readonly">#=YearOfCompletion#</span> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-xs-12 col-md-4 control-label">Title</label> 
    <div class="col-xs-12 col-md-8"> 
     <span class="control-readonly">#=Title#</span> 
    </div> 
</div> 
</script> 
<script id="details-templateTab2" type="text/x-kendo-template"> 
<div class="form-group"> 
    <label class="col-xs-12 col-md-4 control-label">Hello1</label> 
    <div class="col-xs-12 col-md-8"> 
     <span class="control-readonly">#=customMessage#</span> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-xs-12 col-md-4 control-label">Title1</label> 
    <div class="col-xs-12 col-md-8"> 
     <span class="control-readonly">#=Title#</span> 
    </div> 
</div> 
</script> 

이 당신을 찾고 무엇입니까 내 HTML입니까?