Помощь проекту: шаблон подчеркивания

Question

У меня есть проект, который требует от меня использовать шаблон подчеркивания.

Приложение должно получить рецепт от API и отобразить его на странице. Если пользователю нравится рецепт, он сможет его сохранить позже.

Может ли кто-нибудь помочь мне в том, как я это выполнил? Я не уверен, что запросы должны выполняться с клиента или сервера. Кроме того, я не слишком уверен, как возвращенные данные из API (JSON) будут отображаться на странице.

Ниже объект JSON я получил с помощью почтальона на API:

{"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

Вы должны выполнить запрос на 3-й партии 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.