Javascript 个模板使用 underscore.js

Question

我有一个电话数组，其中包含来自 json:

的数据

var phones = [
        {
            "age": 0,
            "id": "motorola-xoom-with-wi-fi",
            "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg",
            "name": "Motorola XOOM\u2122 with Wi-Fi",
            "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).",
            "price": 150
        },

我想通过使用模板将其显示为 ul li，但我对此完全陌生，所以我被卡住了。这是我写的代码：

    <div id="phonesDiv" class="col-md-8"></div>

 <script type="text/template" id="listTemplate">

    <ul>
        <% for (var i=0; i< phones.length; i++) { %>
        <li><%=phones[i].age %></li>
        <li><%=phones[i].name%></li>
        <li><%=phones[i].id%></li>
        <li><%=phones[i].imageUrl%></li>
        <li><%=phones[i].snippet%></li>
        <li><%=phones[i].price%></li>
        <% } %>
</ul>

  var temp = _.template($("#listTemplate").html());
var getPhones = temp({phones: phones});
 $("#phonesDiv").html(getPhones);

问题是我没有显示图像，而是给了我该图像的路径：

   0
Motorola XOOM™ with Wi-Fi
motorola-xoom-with-wi-fi
img/phones/motorola-xoom-with-wi-fi.0.jpg
The Next, Next Generation Experience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).
150

Answer 1

您可以在这里找到答案：

how to print array in underscore.js template?

我正在复制答案以防它被删除：

My example looks like this (almost the same as you own):

<script type='text/template' id="bunny-template">
  <div> 
     <h5><%= name %></h5>
     <ul>
       <% for(var tag in tags) { %>
           <li><%= tags[tag] %></li>
       <% } %>
     </ul>
  </div>
</script>

with the following Javascript:

bunny_data = {
  name: "sprinkles",
  age: 1,
  tags: ['fuzzy','wuzzy']
};

bunny_view = $("#bunny-template").html();
$(body).append(_.template(bunny_view, bunny_data));

只需按照代码中的示例操作即可。

希望它能帮助您解决问题。

Answer 2

显然，如果您将 url 打印到屏幕上，这就是您所看到的。如果你想看一张图片，那就是你必须打印的，一张 <img>。并使用 url 作为 src 属性。

将您的模板更改为类似这样的东西应该可以解决问题：

    ...
    <li><img src="<%=phones[i].imageUrl%>" alt="<%=phones[i].name%>" /></li>
    ...

Javascript 个模板使用 underscore.js

Javascript templates using underscore.js

javascript

jquery

underscore.js

underscore.js-templating