Question

我是Javascript和Jquery的新手。

我使用Jquery $ .ajax发送get请求，处理返回的Json String并使用.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);
            }
        }
        )
 }

Answer 1

基本上我正在阅读你的问题，真的要问你是否应该写一串标记并将其输出到dom中，并将变量插入其中。

对于较小的东西可以做，但如果你用javascript编写很多视图，你需要一个工具来组合视图部分。

有一些工具可以做到这一点：

Answer 2

您可能希望使用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()

但同样，如果你要添加大量的东西，使用模板引擎远远优于家庭酿造的循环解决方案。它也更强大和可扩展（布局修改更容易实现）。

Answer 3

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

Answer 4

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

Answer 5

您可以使用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>标签，BTW）。

要使用此模板，请修改您的功能：

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查看模板代码。

Answer 6

您还可以查看jQuery Templates。它仍处于测试阶段，并没有比这更进一步，但对于你的情况，它应该没问题。

在HTML中显示变量的好方法是什么？

6 个答案: