项目帮助：下划线模板_JavaScript

我有一个项目，要求我使用下划线模板。

该应用程序假设要从API获取食谱并将其呈现到页面上。 如果用户喜欢该食谱，则可以将其保存以备后用。

谁能帮我解决这个问题？ 我不确定是否应该从客户端或服务器完成请求。 另外，我不太确定如何将从API（JSON）返回的数据呈现到页面。

以下是我在API上使用邮递员获得的JSON对象：

{"recipe": {
"publisher": "Closet Cooking",
"f2f_url": "http://food2fork.com/view/35171",
"ingredients": [
  "1/4 cup cooked shredded chicken, warm",
  "1 tablespoon hot sauce",
  "1/2 tablespoon mayo (optional)",
  "1 tablespoon carrot, grated",
  "1 tablespoon celery, sliced",
  "1 tablespoon green or red onion, sliced or diced",
  "1 tablespoon blue cheese, room temperature, crumbled",
  "1/2 cup cheddar cheese, room temperature, grated",
  "2 slices bread",
  "1 tablespoon butter, room temperature\\\n"
],
"source_url": "http://www.closetcooking.com/2011/08/buffalo-chicken-grilled-cheese-sandwich.html",
"recipe_id": "35171",
"image_url": "http://static.food2fork.com/Buffalo2BChicken2BGrilled2BCheese2BSandwich2B5002B4983f2702fe4.jpg",
"social_rank": 100,
"publisher_url": "http://closetcooking.com",
"title": "Buffalo Chicken Grilled Cheese Sandwich"}}

您应该向服务器上的第三方API执行请求。 浏览器强制执行，该可防止网站向不共享相同“起源”（协议，主机名和端口号的组合）的服务器发出请求。 这是一项重要的安全功能，可以防止网站泄漏私人信息或进行恶意行为。

从API获取数据后，您需要将其呈现为HTML标记。 如果您在服务器上运行Javascript，我将在此处渲染它，因为它使禁用JS的用户仍然可以查看渲染的信息。 否则，您应将API数据作为JSON字符串与页面一起发送，以减少服务器往返次数。

当使用下划线模板时，您将使用嵌入的Javascript编写标记，这些Javascript将根据您提供的某些上下文执行。

例如，对于上面的API结果，我们可以制作一个看起来像这样的模板：

var compiledTemplate = _.template(
  '<div>' +
    '<h1><%= title %></h1>' +
    '<p>'
      'Published by ' +
      '<a href="<%= publisher_url %>">' +
        '<%= publisher %>' +
      '</a>' +
    '</p>' +
    '<h2>Ingredients</h2>' +
    '<ul><% _.each(ingredients, function(i) { %>' +
      '<li> <%= i %> </li>' +
    '<% }); %></ul>' +
  '</div>'
)

然后，我们可以简单地通过将数据作为上下文传递给已编译的模板，使用上面的数据进行调用：

var renderedMarkup = compiledTemplate(data);

然后，您将把渲染的标记发送给用户，作为对他们请求的响应。

如果您在编写下划线模板时需要更多帮助，请查阅和。

项目帮助：下划线模板

问题描述

1楼