Kendo TabStrip和Kendo模板

Question

我必須在Tabstrip的每個選項卡上動態加載不同的KENDO模板。所有選項卡的數據源都是相同的。我正在嘗試如下操作，但不起作用。請指教。（劍道TabStrip控件和劍道模板）

<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協助您的問題。當我點擊每個標籤時，它會像你一樣加載內容。你有一個數據源JavaScript對象添加到您的代碼？

需要更多信息。

$(".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函數的動態結果。

這裏是我的JavaScript

$(".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" } 
    ] 

}); 

它沒有真正的問題是什麼，我把數據源中的內容屬性，因爲這是越來越上選擇更換。

這裏是我的html

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

這是你想要的？