子テンプレート

Question

を更新する私のようなマスターテンプレートがあります。

<script type="text/x-jQuery-tmpl" id="baseTmpl"> 
<tr> 
    <td>${Name}</td> 
    <td> 
     <div id="${ID}"> 
      {{tmpl "#displayTmpl"}} 
     </div> 
    </td> 
</tr> 
</script> 

<script type="text/x-jQuery-tmpl" id="displayTmpl"> 
    <a id="myLink" href="javascript:changeTmpl(${ID})">${Department}</a> 
</script> 

<script type="text/x-jQuery-tmpl" id="editTmpl"> 
    <input type="text" id="text" value="${Department}" /> 
</script> 

<script type="text/javascript"> 
    function changeTmpl(id) { 
     var templateItem = $('#'+id).tmplItem();  
     templateItem.tmpl = editTemplate; 
     templateItem.update(); 
    }; 
</script> 

上記のコードは、同様にすべてのtrデータを削除し、私はテンプレートを更新するとき。あなたはVaRのtemplateItemを選択したときに、私は基本テンプレートでちょうどdiv要素の内容ではなく、完全なTR

Answer 1

を更新したい、IDは、現時点では、ないのdiv

<tr div id="${ID}"> 
.... 
</tr> 

TRを参照してください= $（ '＃' + id）.tmplItem（）;それはidが参照するものなので、divを引き出すだけです。

Answer 2

あなたが行う場合は、この：

var templateItem = $('#'+id).tmplItem(); 

あなたが実際にそのテンプレート（全体<tr>）によってレンダリングすべてのために同じtmplItemであるdiv要素のtmplItemを得ています。

div内の要素のtmplItemにアクセスするとします。これはうまくいく：

var templateItem = $('#'+id).children(":first").tmplItem();