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();在模板执行后变为null。因此，我的工作是将模板存储在全局变量中，然后重新使用它来呈现新模板。

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

jTemplates（jQuery Plugin） - 更新行数据

3 个答案: