剣道タブストリップと剣道テンプレート

Question

タブストリップをクリックするたびに異なる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> 

であなたが探して何本か？