1

我有一个 javascript 对象数组，如下所示：

"partners":[{"username":"fangonk","profileImg":"fangonk.jpg"},
            {"username":"jane","profileImg":"jane.jpg"},
            {"username":"tom_jones","profileImg":"tom.jpg"}]

我想使用下划线库输出每个数组键的值。因此，对于每个对象，我想输出如下所示的内容：

<h1>Username Value</h1><img src="profileImg Value here" />
4

2 回答 2

1

对你的“来源”有点困惑，但我认为你只是想这样做：

_.each(partners, function(p) { document.write('<h1>' + p.username + '</h1>\
  <img src="' + p.profileImg + '" alt="' + p.username + '" />'); }
//substitute some DOM method (e.g. jquery().append) for document.write

这是你要找的结果吗？

这仅适用于您的来源看起来更像：

var partners = [{"username":"fangonk","profileImg":"fangonk.jpg"},
                {"username":"jane","profileImg":"jane.jpg"},
                {"username":"tom_jones","profileImg":"tom.jpg"}];

编辑：

var someBiggerObject = { 
  partners: [
    {"username":"fangonk","profileImg":"fangonk.jpg"},
    {"username":"jane","profileImg":"jane.jpg"},
    {"username":"tom_jones","profileImg":"tom.jpg"}
  ]
};

_.each(someBiggerObject.partners, function(p) { document.write('<h1>' + p.username + '</h1>\
  <img src="' + p.profileImg + '" alt="' + p.username + '" />'); }
//substitute some DOM method (e.g. jquery().append) for document.write
于 2013-02-28T17:25:05.073 回答
0

正确的方法是 _.template

例子

如果你的结构是这样的：

var list = {"partners":[ 
    {"username":"fangonk","profileImg":"fangonk.jpg"},
    {"username":"jane","profileImg":"jane.jpg"},
    {"username":"tom_jones","profileImg":"tom.jpg"}
]};

您可以创建重复项模板（注type="text/html"）

<script type="text/html" id="userItemTemplate">
    <h1><%= username %></h1><img src='<%= profileImg %>' />
</script>

并通过循环将每个项目放入模板中

var uIT = $("#userItemTemplate").html();
_.each(list.partners,function(user){
    $("#target").append(_.template(uIT,user));        
});

或者

将循环放入您的模板

<script type="text/html" id="userTemplate">
    <% _.each(partners,function(user,key,list){ %>
    <h1><%= user.username %></h1><img src='<%= user.profileImg %>' />
    <% }); %>
</script>

然后将整个数组推入

var uT = $("#userTemplate").html();
$("#target2").html(_.template(uT,list));

请注意，我使用的是 lodash 而不是下划线。它在很大程度上是兼容的，但我更喜欢 lodash，因为基准测试更快并且库维护得很好。

于 2013-03-05T06:43:00.530 回答