从 ajax 获取的 json 创建 html

Question

我想做的事：

我有一个基于 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);
        }
    });
}

所以到目前为止，这似乎非常基本。从控制台我可以看到返回的正确数据。这些数据应该放在项目网站的某个地方。

问题：

是否有任何直接的方法可以在 javascript 中从 json 创建 html？实际上我想从项目的逻辑中分离模板（树枝）。那么生成html是否正确，例如在loadData方法的成功回调中？

我可以通过返回 html 而不是 json 来绕过这个问题。但我考虑为我的项目构建某种 rest api，我认为需要 json 进行传输。

有什么建议或想法吗？请分享您的处理方式。

Answer 1

您可以使用angular js。 symfony 有一件好事：

angular.module('myApp', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('[[').endSymbol(']]');
    };
);

它将{{ 更改为[[ 并让您在TWIG 中使用模板。

This 将有助于 Angular js 中的 json 查询。

Answer 2

获取数据并将其发送回服务器？我认为它不正确。

尝试查看underscore.js ( _.template() ) 以在客户端使用接收到的 json 对象进行模板化。

并尝试像这样使用 TWIG：

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

var template = _.template("Hello [[ name ]]!");
template({name : "Mustache"});
=> "Hello Mustache!"

Answer 3

看看Handlebars。

您基本上可以将 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>