Kendo TabStrip und Kendo Vorlagen

Question

Ich muss verschiedene KENDO Vorlagen dynamisch auf jedem Tab-Klick von Tabstrip laden. Die Datenquelle für alle Registerkarten ist identisch. Ich versuche es wie unten, aber es funktioniert nicht. Bitte beraten. (Kendo TabStrip und Kendo Vorlagen)

<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

ich einen jsBin haben damit begonnen, mit Ihrem Problem zu helfen. Wenn ich auf jede Registerkarte klicke, lädt es Inhalte, wie Sie sie beschreiben. Verfügen Sie über ein JavaScript-Objekt für eine Datenquelle, das Sie Ihrem Code hinzufügen möchten?

Benötigen Sie weitere Informationen, bitte.

Answer 2

Ich denke, das Problem ist, dass Sie in Ihrer Datenquelle nicht das "DataContentField" definieren. Sobald ich dies in Verbindung mit einer Datenquelle hinzugefügt habe, habe ich dynamische Ergebnisse von select function gesehen.

Hier ist mein 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" } 
    ] 

}); 

Es ist auch nicht wichtig, was ich in der content-Eigenschaft der Datasource setzen, weil dies bei der Auswahl ersetzt zu werden.

Hier ist mein 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> 

Ist das, was Sie suchen?