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：“奥运会排球运动员”， listItems：[ { 名称：“Misty May-Treanor”， hasOlympicGold：true }， { 名称：“Kerri Walsh Jennings”， hasOlympicGold：true }， { 名称：“Jennifer Kessy”， hasOlympicGold：false }， { 名称：“四月罗斯”， 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}));

关键是你需要一个模板的命名键来获取要保留的东西。否则，它会占用您的数组并将其填充到全局命名空间中，在这种情况下，它没有意义，因为它是一个数组。所以要解决这个问题，只需将其转换为对象，然后再将其发送到模板中。因此，对于我们的首次传递，我们会将您的数据映射到groups

userTemplate({'groups':dataSorted})

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

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

有关下划线模板的详情，请参阅http://underscorejs.org/#template。我认为开发人员并没有真正看到美国模板非常强大（或者至少就像过去那样）

Answer 2

会打败我，但我还是认为我会分享我的jsFiddle。

http://jsfiddle.net/RXCrr/1/

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

    <script type="text/template" class="template-user">
        <h3>
            <%= user_id%>
        </h3>
        <div>
            <div>
                <a class="group<%= group_id%>" id="<%= group_id%>">
                    <p><%= group_id %></p>
                    <p>(group<%= group_id%>)</p>
                </a>
            </div>
        </div>
    </script>

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

2 个答案: