1

私がしたいこと：

symfony2 (php) に基づくアプリケーションがあります。単純なアクションは、このような json としてデータを返します

    $headers = array(
        'Content-Type' => 'application/json'
    );

    return new Response($data, 200, $headers);

このアクションは、次のように JavaScript から呼び出されます

function loadData(action){
    $.ajax({
        type: "POST",
        url: action,
        success: function(data){
            console.log(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

したがって、これはこれまでのところ非常に基本的なようです。コンソールから、正しいデータが返されていることがわかります。このデータは、プロジェクト Web サイトのどこかに配置する必要があります。

質問：

javascript内でjsonからhtmlを作成する簡単な方法はありますか? 実際には、プロジェクトのロジックとは別のテンプレート (小枝) が必要です。では、loadData メソッドの成功コールバックなどで html を生成するのは正しいでしょうか?

json の代わりに html を返すことで、この問題を回避できました。しかし、トランスポートにjsonが必要だと思うプロジェクト用のある種のレストAPIを構築することを考えています。

提案やアイデアはありますか？これを処理する方法を共有してください。

4

3 に答える 3

1

データを取得してサーバーに送り返しますか? 正しくないと思います。

受信した json オブジェクトを使用してクライアント側でテンプレートを作成するには、 underscore.js ( _.template() )を調べてみてください。

そして、このようにTWIGを使用してみてください:

_.templateSettings = {
  interpolate : /\[\[(.+?)\]\]/g
};

var template = _.template("Hello [[ name ]]!");
template({name : "Mustache"});
=> "Hello Mustache!"
于 2013-04-02T08:38:35.237 に答える
0

ハンドルバーをご覧ください。

基本的に、JSON を Handlebars テンプレートに渡すことができます。

テンプレート:

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>
</script>

JS:

var source   = $("#entry-template").html(),
    template = Handlebars.compile(source),
    context = {title: "My New Post", body: "This is my first post!"},
    html    = template(context);

結果：

<div class="entry">
    <h1>My New Post</h1>
    <div class="body">
        This is my first post!
    </div>
</div>
于 2013-04-02T08:29:40.697 に答える