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

もう 1 つの方法として、データ バインディングがあります。

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 に答える