如何使用jqueryui-tabs创建基于observablearray的选项卡

Question

我想用jqueryui - 选项卡创建一个选项卡结构。

根据文档，我们可以硬编码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>

任何人有任何想法，我该怎么办呢？

Answer 1

您需要小部件的自定义绑定处理程序。绑定处理程序告诉Knockout如何同步DOM和你的模型。 Knockout不知道jQuery UI的选项卡小部件，它不知道您的视图模型。幸运的是，编写了很多用于常见小部件的绑定处理程序。 Here's one for tabs。