在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); 
      } 
     } 
     ) 
}

答

基本上我读了你的问题，真正做到问你是否不应该写标记的字符串，并将其输出到DOM，与concatted到它的变量。

对于较小的东西它可以做，但如果你用javascript编写大量的视图，你会需要一个工具来将视图部分放在一起。

有工具，有这样做：

http://mustache.github.com/
https://github.com/adammark/Markup.js
http://api.jquery.com/category/plugins/templates/

远离jQuery模板。该项目几乎两年前就已弃用。 – 2012-08-12 05:22:43

答

你也可以看看jQuery Templates。它仍处于测试阶段，除此之外还没有进一步发展，但对于你的情况，它应该没问题。

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()

但同样，如果你要追加一吨的东西，使用模板引擎是迄今为止优于家庭酿造的循环解决方案。它也更加健壮和可扩展（并且布局修改更容易实现）。

答

就像其他人已经说过的那样，如果您有很多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>。

答

我相信你在这里做的很好，在这种情况下，我会做一些非常相似的事情。使用特殊的插件是可能的，并且可能更加用户友好，但它们几乎总是伴随着大量的开销。我怀疑这可以在处理器负载方面更高效地完成。

答

您可以使用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来查看模板代码。

在HTML中显示变量的最佳做法是什么？

相关推荐