2011-11-08 55 views
0

說我有這樣的jTemplate,即迭代直通對象的列表:jTemplates(jQuery插件) - 更新行數據

{#template MAIN} 
    {#foreach $T.Results as result} 
     {#include content root=$T.result} 
    {#/for} 
{#/template MAIN} 

{#template content} 
    <div> 
     <span>ID : {$T.result.id}</span> 
     <span>Name : {$T.result.name}</span> 
     <span>Price : {$T.result.price}</span> 
     <button onclick="update(this);"><span>Edit</span></button> 
     <!-- Opens modal form to edit data --> 
    </div> 
{#/template content} 

我如何去更新該行後不致使整個模板用戶更改了特定行的數據?

我想在這裏實現是撥打電話使用AJAX來檢索受影響行的最新數據爲DB。和重新渲染,而不需要重新加載整個頁面只有一行。希望我的問題很明確。

回答

0

好了,這就是我想出了..

var templates = $.createTemplate($('#MyTemplates').html())._templates; 
// Find the DIV to render 
var $target = $('#content_' + data.d.ContentId).parent("div"); 
$target.setTemplate(templates['content']); 
$target.processTemplate(data.d); 

這可能不是最好的解決辦法,但它的工作原理。如果你有更清晰的解決方案,請發帖。謝謝;)

0

數據綁定將是另一種選擇。

KnockoutJs會在模型更新時自動更新問題中的「內容」。

你仍然需要確定更新和識別模型中的行,但淘汰賽將獲得過去重新再次渲染整個模板。

+0

knockoutJs是一個圓滑庫中,雖然(我的觀點poiont)它不是最好切換到另一個庫正弦的一個u必須使用犯規支持某個特定的功能之中。但最好的辦法是試圖擴展現有的圖書館。 –

0

當添加新記錄時,我有類似的需求來更新內容。我發現問題是在模板執行後$("#TemplateResultsTable2").html();變爲空。所以我周圍的工作是將模板存儲在全局變量中,然後重新使用它來呈現新模板。

<script type="text/javascript"> 
var t = null; 
var template_render = function(content) { 
    content = $.parseJSON(content); 
    var data = { 
     table:content 
    }     
    var x = $("#TemplateResultsTable2").html(); 
    // console.log(x); 
    //console.log(data); 
    $('div#table-jtemplates').setTemplate(x);  
    $('div#table-jtemplates').processTemplate(data);   
} 

//View attribute 
var view = function(){ 
    $.ajax({    
     url: 'viewattributes', 
     type:"POST", 
     success: function(content) { 
      t = $("#TemplateResultsTable2").html(); 
      template_render(content);    
     }  
    }) 
} 

var add = function(x){  
    $.ajax({    
     url: 'addattributes', 
     type:"POST", 
     success: function(content) {  
      content = $.parseJSON(content); 
      var data = { 
       table:content 
      }     
      // var x = $("#TemplateResultsTable2").html(); 
      $('div#table-jtemplates').setTemplate(x);  
      $('div#table-jtemplates').processTemplate(data);  
     }    
    })  
} 

var remove = function(){ 
    $.ajax({    
     url: 'removeattributes', 
     data:{id:"1"}, 
     type:"POST", 
     success: function(content) { 
      alert(content); 
      content = $.parseJSON(content); 
      var data = { 
       table:content 
      }     
      // var x = $("#TemplateResultsTable2").html(); 
      $('div#table-jtemplates').setTemplate(x);  
      $('div#table-jtemplates').processTemplate(data);  
     } 
    }) 
} 

//view 
$(document).ready(function(){ 
    $("#save").live("click",function(){ 
     var tmpl = $("#TemplateResultsTable2").html(); 
     add(t); 
    }) 
}) 
view(); 
</script>