2

我是 Javascript 和 Jquery 的新手。

我正在使用 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);
            }
        }
        )
 }
4

6 回答 6

1

基本上，我正在阅读您的问题，以真正询问您是否应该编写一串标记并将其输出到 dom 中，并将变量连接到其中。

它可以用于较小的东西，但如果您使用 javascript 编写大量视图，您将需要一个将视图部分组合在一起的工具。

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

于 2012-08-08T22:32:01.927 回答
1

您可能想要使用像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-08T22:33:17.657 回答
1

就像其他人已经说过的那样，如果您有很多 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 一样。如您所见，它更具可读性，并且可以避免语法错误，例如缺少 close </a>。

于 2012-08-08T22:36:29.377 回答
0

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

于 2012-08-08T22:39:45.630 回答
0

您可以为此使用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-08T23:14:35.087 回答
-1

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

于 2012-08-08T22:32:10.710 回答