3

テンプレートの使用は初めてで、テンプレートの再利用について質問があります。読み込み時に、テンプレートとデータを取得します。

$(function() {
    var source, content;
    $.get('/templates/template.html', function(data) {
        source = data;
    })
    $.getJSON("/data/data.php", function(data) {
        content = data;
    })
    $(document).ajaxStop(function() {
        window.template = Handlebars.compile(source);
        $('#user-list tbody').html(window.template(content));
    })
})

テンプレートは次のとおりです。

{{#users}}
<tr>
    <td> {{name}} </td>
</tr>
{{/users}}

同じファイル内の HTML は次のとおりです。

<div id="content-div">
    <table id="user-list">
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

行を追加したい場合、このテンプレートを再利用するにはどうすればよいですか? 例えば：

function loadMore() {
    $.ajax({
        type : 'POST',
        url : '/data/more.php',
        dataType : 'json',
        success : function(data) {
            $('#user-list tbody').append(window.template(data));
        }
    });
}

データを取得しますが、に追加しませんtbody。どうしてこれなの？

更新: また、テーブル構造全体をそのままテンプレート ファイルに入れることは可能ですか?

<table id="user-list">
    <thead></thead>
    <tbody>
        {{#users}}
        <tr>
            <td> {{name}} </td>
        </tr>
        {{/users}}
    </tbody>
</table>

最初のページの読み込み時にのみ、構造全体が取り込まれますが、追加の行を追加<tr>したい場合は、その部分を追加するだけです。

更新: トピック外の副次的な質問かもしれませんが、これは一般的にこの状況にアプローチする正しい方法ですか? 私は、必要なときに取り込んで使用できるテンプレートでいっぱいのフォルダーを思い描いています。ajax呼び出しでそれらを取得するのは正しいですか?

4

5 に答える 5

0

テンプレートの構造や追加の使用とは関係ありません。他の何かが汚れています。実証するために次のフィドルを書きました。テンプレートを比較する場合に設定var template = "#Template1";します。"#Template2"

参照: http://jsfiddle.net/mcw0933/GnZ9M/

于 2013-11-05T17:57:16.850 に答える
0

あなたの更新/補足質問に関しては、これがあなたがその状況にアプローチする方法だと思います。

一般に、テンプレートはリクエスト内で (バイトサイズ的に) 大きくなりません。ただし、現在のビューに基づいて「必要なときに関連するテンプレートを含める」ように記述するのは簡単だと思います。これは、Rails が JS と CSS を実行するように設定されている方法であるため、何かを実装できます。関連する各モデル/ビューのようhandlebars.htmlに、JavaScript が実行される前にフッターにそれらのビューを取り込むタグを設定します。

ただし、より良い方向は、プリコンパイルである可能性が高くなります。http://handlebarsjs.com/precompilation.html。Rails-y の有望なオプションは次のとおりです: https://github.com/leshill/handlebars_assets

于 2013-11-11T15:18:00.710 に答える