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的标签小部件，它不知道你的viewmodel。幸运的是，已经编写了很多用于常见小部件的绑定处理程序。 Here's one for tabs

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

1 个答案: