0

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

4

3 回答 3

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

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

于 2011-11-22T02:25:57.373 回答
0

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

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

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

于 2011-11-22T03:19:36.510 回答
0

添加新记录时，我有类似的要求来更新内容。我认为问题$("#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>
于 2012-04-07T05:05:52.283 回答