jTemplates (jQuery Plugin) - 更新行数据答案

【问题标题】：jTemplates (jQuery Plugin) - Updating row datajTemplates (jQuery Plugin) - 更新行数据
【发布时间】：2011-11-08 03:09:12
【问题描述】：

假设我有一个像这样的 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 以检索受影响行的最新数据。并且只重新渲染该行而不是重新加载整个页面。希望我的问题很清楚。

【问题讨论】：

标签： jquery jtemplates

【解决方案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);

这可能不是最好的解决方案，但它确实有效。如果您对此有更清洁的解决方案，请发布。谢谢;)

【讨论】：

【解决方案2】：

数据绑定是另一种选择。

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

您仍需要确定更新并识别模型中的行，但 Knockout 将无法再次重新渲染整个模板。

【讨论】：

knockoutJs 是一个时尚的库，尽管（我的观点）它不是最好的切换到另一个库，因为你正在使用的库不支持特定功能。但最好的办法是尝试扩展现有的库。

【解决方案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>

【讨论】：