項目幫助：下劃線模板

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

您應該執行請求到服務器上的第三方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。