Question

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

应用程序假设从API获取配方并将其呈现给页面。如果用户喜欢该配方，他们将能够保存它以供日后使用。

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

下面是我在API上使用postman获得的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"}}

Answer 1

您应该对服务器上的第三方API执行请求。浏览器会强制执行Same-origin policy，这会阻止网站向不会共享相同内容的服务器发出请求。（协议，主机名和端口号的组合）。这是一项重要的安全功能，可防止网站泄露私人信息或恶意行为。

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

当您使用下划线模板时，您正在使用嵌入式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);

然后，您可以将呈现的标记作为对其请求的响应发送给用户。

如果您需要更多帮助撰写下划线模板，请查看official docs和this guide。

项目帮助：下划线模板

1 个答案: