Question

我有一个项目列表显示在一个选项卡中，我希望能够单击其中一个项目并打开一个新选项卡并在新选项卡上显示其详细信息。我通过执行以下操作添加新标签：

$(".btn-opener").click(function(){

$('#tabs').tabs('add', 'http://localhost/GetItem/' + $(this).attr('href'), "View Details");

}

我的问题是url实际上是一个返回JSON的服务端点。我希望能够将js模板应用于返回的数据。我该怎么做呢？我是否需要挂钩选项卡的加载事件？

Answer 1

我想我会通过在tab选择器中添加一个带有我需要的HTML的div来解决这个问题，然后使用它的id来设置新选项卡的片段。例如：

$('.btn-opener').click(function () {

    var $this = $(this),
        itemID = $this.data("item-id");

            $.get("http://localhost/GetItem/" + itemID,

                function (data, textStatus, jqXHR) {

                    var html = Mustache.to_html($("#item-template").html(), data);                          

                    $("#tabs").append('<div id="' + id + '">' + html + '</div>');
                    $('#tabs').tabs("add", "#" + id, $this.text());

                },  
                "json"
            );

            return false;
        });

在将此标记为答案之前，我将等待是否有人想出更好的解决方案。

jquery-ui标签 - 添加标签

1 个答案: