jTemplates (jQuery插件)-更新行数据

Question

假设我有一个像这样的jTemplate，它遍历对象的列表：

{#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来检索受影响行的最新数据。并且只重新呈现该行，而不是重新加载整个页面。希望我的问题是清楚的。

Answer 1

好的，这就是我想出来的..

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); 

这可能不是最好的解决方案，但它是有效的。如果你对此有更清晰的解决方案，请发帖子。谢谢;)

Answer 2

数据绑定将是另一种选择。

当模型更新时，KnockoutJs会自动更新有问题的“内容”。

您仍然需要确定更新并识别模型中的行，但Knockout将再次重新呈现整个模板。

Answer 3

我有一个类似的要求，即在添加新记录时更新内容。我认为问题出在$("#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>