jTemplates (jQuery Plugin) - Обновление данных строки - PullRequest
Новая
       11

jTemplates (jQuery Plugin) - Обновление данных строки

0 голосов
/ 08 ноября 2011

Скажем, у меня есть 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}

Как мне обновить строку без рендеринга всего шаблона после того, как пользователь изменил данные конкретной строки?

Чего я хочу добиться здесь, так это позвонить в db, используя AJAX, чтобы получить последние данные затронутой строки. И перерисовать только эту строку вместо перезагрузки всей страницы. Надеюсь, мой вопрос ясен.

Ответы [ 3 ]

0 голосов
/ 22 ноября 2011

Связывание с данными будет другой альтернативой.

KnockoutJs автоматически обновляет "содержимое", о котором идет речь, при обновлении модели.

Вам все равно нужно будет определить обновления и определить строку в модели, но Knockout не сможет повторно выполнить весь шаблон заново.

0 голосов
/ 07 апреля 2012

У меня было аналогичное требование для обновления содержимого при добавлении новых записей.Я полагаю, что проблема с $("#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>
0 голосов
/ 22 ноября 2011

хорошо, вот что я придумала .. 

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

Возможно, это не лучшее решение, но оно работает.Делайте пост, если у вас есть более чистое решение для этого.Спасибо;)

...