javascript - 无法使用带有下划线模板的 json 对象 ¿ 如何正确修复/格式化它？

Question

我遇到下划线模板问题，但我无法找到解决问题的方法，我的情况如下。我有一个从 Web 服务返回的 json 对象，如下所示:

json= [{"username":"blue", "user_id":"1", "group_id":"1" ...},
       ...,{"username":"teal", "user_id":"1", "group_id":"2" ...}]

从服务器取回这个对象后，我试图制作它，以便我可以使用模板在网页上渲染该对象，为此，我以一种我认为会的方式“groupby”该数组通过执行以下操作来最好地满足我的需求:

json = _.chain(json).sortBy("user_id").groupBy("user_id").value();

这返回了一个具有以下结构的对象:

json= {"1":[{"username":"blue", "user_id":1, ...},
       ...,{"username":"teal", "user_id":1, ...}],"228":[{...},{...}]}

现在，我想要的是使用以下模板:

<script type="text/template" class="template-users">
            <div class="accordion">
                {%- _.each( rc, function( rc ){ %}

                <h3>

                    {%- rc.user_id%}

                </h3>
                <div>
                    <div>
                        <a class="group{%- rc.group_id%}" id="{%- rc.group%}">
                            <p>{%- rc.group %}</p>
                            <p>(group{%- rc.group%})</p>
                        </a>
                    </div>
                </div>
                {%- }); %}
            </div>


        </script>

我在 js 文件中设置了模板变量，如下所示:

_.templateSettings.variable = "rc";

我还更改了 underscore.js min 文件中的以下行，因为我正在使用 asp.net

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g,      
                      evaluate    : /\{%([\s\S]+?)%\}/g,  
                      escape      : /\{%-([\s\S]+?)%\}/g};

不过，每当我尝试运行它时，它都不会导致模板充满空的东西(也就是说，“{%- %}”中的每个值都返回空值或空值，但我知道事实上，在模板上使用 json 之前，通过执行以下操作来填充 json:

var template = _.template(
                        $("script.template-users").html()
                    );

我在某个地方见过somewhere他们使用 _.each( rc.listItems, function( listItem ){});迭代对象上的项目，但这只是因为它们有一个具有以下结构的对象:

var templateData = { listTitle: "Olympic Volleyball Players", listItems: [ { name: "Misty May-Treanor", hasOlympicGold: true }, { name: "Kerri Walsh Jennings", hasOlympicGold: true }, { name: "Jennifer Kessy", hasOlympicGold: false }, { name: "April Ross", hasOlympicGold: false } ] };

所以问题是，谁能让我的代码工作？或者如果不可能，我可以让谁来让我的 json 对象以与上述方式相同的方式排列？

提前致谢。

Answer 1

这是一个工作示例:http://jsfiddle.net/uBaZ6/1/

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g,      
                  evaluate    : /\{%([\s\S]+?)%\}/g,  
                  escape      : /\{%-([\s\S]+?)%\}/g};
var data = [{"username":"blue", "user_id":"1", "group_id":"1"},{"username":"teal", "user_id":"2", "group_id":"2"},{"username":"red", "user_id":"3", "group_id":"2"},{"username":"blue", "user_id":"1", "group_id":"1"}];

var dataSorted = _(data).chain().groupBy("user_id").sortBy("group_id").value();
var userTemplate = _.template($("script.template-users").html());

$("#acc").html(userTemplate({'groups':dataSorted}));

关键是你需要一个命名的键来让模板保存一些东西。否则，它会获取您的数组并将其填充到全局命名空间中，在这种情况下这是没有意义的，因为它是一个数组。因此，要解决这个问题，只需在将其发送到模板之前将其转换为对象即可。因此，对于我们的第一遍，我们将您的数据映射到组

userTemplate({'groups':dataSorted})

然后我们在模板中使用它，例如

{% _.each(groups, function(group){ %}
<h3>{%- group[0].group_id %}</h3>

您可以看到http://underscorejs.org/#template有关下划线模板的更多信息。我认为开发人员并没有真正认为美国模板非常强大(或者至少过去是这样)