在HTML中顯示變量的最佳做法是什麼？

我是JavaScript和Jquery的新手。在HTML中顯示變量的最佳做法是什麼？

我正在使用Jquery $ .ajax發送獲取請求，處理返回的Json字符串，並使用.html()在我的html中顯示<div id="myTabs"></div>中的內容。你可以從我的代碼中看到，我正在使用一個String變量來創建一個HTML列表。我是否在做一個好的練習？我覺得這種方式不是很敏捷，有沒有更好的方法來做到這一點？

謝謝！

function updateRelated(str) 
{ 
    $.ajax(
     { 
      url:ServerUrl+api_subject, 
      type:'GET', 
      success:function(json) 
      { 
       // alert(json); 
       var obj = jQuery.parseJSON(json); 

       var toDisplay=""; 
       var tableDisplay="<ul>"; 
       for(var i=0;i<obj.subject_list.length;i++) 
       { 
        tableDisplay=tableDisplay+'<li><a href="subject.htm?subjectid='+obj.subject_list[i].id+'">'+obj.subject_list[i].title+'</li>'; 
        // toDisplay=toDisplay+"<br>preferred_synonym:"+obj.relatedCocepts[i].preferred_synonym+",Type: "+obj.relatedCocepts[i].type+",score: "+obj.relatedCocepts[i].score; 
       } 
       tableDisplay=tableDisplay+"</ul>" 
       $("#myTabs").html(tableDisplay); 
      } 
     } 
     ) 
}

來源

2012-08-08 leon

基本上我讀了你的問題，真正做到問你是否不應該寫標記的字符串，並將其輸出到DOM，與concatted到它的變量。

對於較小的東西它可以做，但如果你用javascript編寫大量的視圖，你會需要一個工具來將視圖部分放在一起。

有工具，有這樣做：

來源

2012-08-08 22:32:01 Kristian

遠離jQuery模板。該項目幾乎兩年前就已棄用。 – 2012-08-12 05:22:43

-1

你也可以看看jQuery Templates。它仍處於測試階段，除此之外還沒有進一步發展，但對於你的情況，它應該沒問題。

來源

2012-08-08 22:32:10

jQuery模板已被棄用。避免。 – 2012-08-08 22:34:01

FWIW，jQuery模板被剛剛發佈的[outlook.com]（https://outlook.com）使用。它可能沒有積極的發展，但它仍然非常實用。 – hyperslug 2012-08-08 23:55:12

您可能需要使用像jsViews這樣的模板引擎。如果你堅持循環和使用jQuery創建元素，看一看：http://www.andyjarrett.co.uk/blog/index.cfm/2009/3/14/Creating-a-new-DOM-element-with-jQuery/ - 語法很簡單：

div = $("<div>"); // then append more stuff with append() or html()

但同樣，如果你要追加一噸的東西，使用模板引擎是迄今爲止優於家庭釀造的循環解決方案。它也更加健壯和可擴展（並且佈局修改更容易實現）。

來源

2012-08-08 22:33:17

就像其他人已經說過的那樣，如果您有很多html，模板引擎就是要走的路。但是你可以通過使用數組來清理當前的代碼。我評論了幾件事情：

var list = [], 
    arr = obj.subject_list, 
    len = arr.length; // cache length for better performance 

for (var i=0; i<len; i++) { 
    list.push(
    '<li>'+ 
     '<a href="subject.htm?subjectid='+ arr[i].id +'">'+ 
     arr[i].title + 
     '</a>'+ // you forgot to close <a> 
    '</li>' 
); 
} 

$("#mytabs").html('<ul>'+ list.join('') +'</ul>');

在JavaScript中處理html時，我建議正確縮進html，就像它是真正的html一樣。正如你可以看到它更可讀，你可以避免語法錯誤，比如缺少關閉</a>。

來源

2012-08-08 22:36:29 elclanrs

我相信你在這裏做的很好，在這種情況下，我會做一些非常相似的事情。使用特殊的插件是可能的，並且可能更加用戶友好，但它們幾乎總是伴隨着大量的開銷。我懷疑這可以在處理器負載方面更高效地完成。

來源

2012-08-08 22:39:45 Pevara

您可以使用jsrender。

定義使用特殊類型text/x-jsrender腳本標籤中的模板：

<script id="listTemplate" type="text/x-jsrender"> 
    <li><a href="subject.htm?subjectid={{>id}}">{{>title}}</a></li> 
</script>

發現它很容易地看到你的HTML的結構。錯過的東西，而不是串聯在JavaScript（你錯過了關閉</a>標籤，順便說一句）的機會較少。

要使用這個模板，修改你的功能是這樣的：

success:function(json) 
{ 
    // alert(json); 
    var obj = jQuery.parseJSON(json); 
    var htmlList = $('#listTemplate').render(obj.subject_list); 
    $('#myTabs').html(htmlList); 
}

這裏有一個演示的jsfiddle：http://jsfiddle.net/d4DjY/。將鼠標懸停在鏈接上可以看到它們在查詢字符串中具有正確的ID。

更多演示：http://borismoore.github.com/jsrender/demos/demos.html。使用view-source來查看模板代碼。

來源

2012-08-08 23:14:35 hyperslug

在HTML中顯示變量的最佳做法是什麼？

回答

相關問題