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

【问题标题】：How to create tabs based on observablearray using jqueryui-tabs如何使用 jqueryui-tabs 基于 observablearray 创建选项卡
【发布时间】：2016-03-01 13:05:08
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

标签： javascript knockout.js jquery-ui-tabs

【解决方案1】：

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

【讨论】：

感谢您的回答。这有帮助。