javascript - 从主干视图模板中访问子对象/模型的变量

Question

给定来自我的服务器的 JSON 响应，如下所示：

{
"products" : [
    {
        "Product" : {
            "id" : "122",
            "name" : "product X",
            "price" : "19.99",
        },
        "Picture" : [
            {
                "product_id" : "122",
                "id" : "145",
            },
            {
                "product_id" : "122",
                "id" : "146",
            },
            {
                "product_id" : "122",
                "id" : "147",
            }
        ]
    }
]
}

我将创建一个主干模型，该模型将传递给主干视图。在我的视图模板中，我可以通过以下方式访问产品名称：

 <%= Product.name %>

并且所有工作都按预期进行。但是可以说我想获得第一张图片的 id。我试过：

<%= Picture.0.id %>

但我在控制台中收到以下错误：

Uncaught SyntaxError: Unexpected number 

所以简而言之，我如何从产品模板访问与我的产品相关的各种图片的属性。如果这很重要，我正在使用下划线模板。

Answer 1

正常的 javascript 数组索引器语法[index]可以解决问题：

<%= Picture[0].id %>

编辑：Underscore 接受<% %>标签内的任何旧 javascript，因此如果要检查数组是否为空，可以使用标准_.isEmpty方法进行：

<% if(!_.isEmpty(Picture)) { %>
   <%= Picture[0].id %>
<% } else { %>
   No picture
<% } %>

或您喜欢的任何其他 javascript 构造。有关更多信息，请参阅文档。