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

Question

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

根据文档，我们可以在 html 中硬编码我们想要的选项卡数量，并在锚标记中为每个 "li" tag.That 提供 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.

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

How to create tabs based on observablearray using jqueryui-tabs

javascript

knockout.js

jquery-ui-tabs