代码之家 › 专栏 › 技术社区 › Shrabanee

如何使用jqueryui选项卡基于可观察earray创建选项卡

jquery-ui-tabs knockout.js javascript

Shrabanee · 技术社区 · 8 年前

我正在尝试使用jqueryui-tabs创建一个选项卡结构。

根据文档,我们可以在我们想要的html中硬编码标签的数量,并为每个“li”标签在锚标签中提供href。这样一切都很好。

但我需要的是不同的。我正在从服务器检索一些数据。基于数据的长度,我想显示选项卡的数量(我试图使用foreach绑定来实现)。我可以创建选项卡,但如果没有“href”属性,它就无法工作。

this.tabList = ko.observableArray(
  [
    {tbna: "abc"},
    {tbna:'1234'}
  ]);

$( "#tabs" ).tabs();

this.retrieveData = function()
{
 //Do stuff here on click
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tabs" style="font-size: 14px;">
    <ul data-bind="foreach : tabList">
       
       <li><a data-bind="text : $data.tbna, click: $parent.retrieveData"></a></li>
    
    </ul>
  </div>

有人知道我该怎么做吗?