Блог

У меня есть главный шаблон, подобный:

 <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 и при обновлении шаблона. Я хочу обновить содержимое только div, а не полного tr

В базовом шаблоне идентификатор должен ссылаться на tr, а не на div

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

В данный момент, когда вы выбираете var templateItem = $(‘#’ id).tmplItem(); , он извлекает div только потому, что это то, на что ссылается идентификатор.

Когда вы делаете это:

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

Вы получаете tmplItem div, который на самом деле является одним и тем же tmplItem для всего, что отображается этим шаблоном (целиком <tr> ).

Вы хотите получить доступ к tmplItem элементов внутри div. Это сработало бы:

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