Question

我正在使用jquery-ui标签。单击选项卡时，我想获取与之关联的数据。我正在使用knockout foreach绑定来显示标签。将我的代码提供给

var counter = 0;
var ItemViewModel = function(data) {
  counter += 1;
  this.id = 'tab-' + counter.toString();
  this.href = '#tab-' + counter.toString();
  this.tbna = data['tbna'];
  this.text = "text for tab "+ data['tbna'];
  this.query = data['tqry'];
};

this.tabList = ko.observableArray();
var dt = {};
dt.result = [{tbna : 'a', tqry : 'some texts'},{tbna : 'b', tqry : 'some more text'}]

 for(var i in dt['result'])
 {
   this.tabList.push(ItemViewModel(dt['result'][i]));
 }

$( "#tabs").tabs({
  activate: function(event, ui){
    var tabNumber = ui.newTab;

    // I need "query" associated with the tab here, on clicking on tab.
    
    console.log(tabNumber); 
  }
  });

<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>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="tabs" data-bind="tabs: { refreshOn: tabList }">
    <ul data-bind="foreach: tabList">
        <li >
            <a data-bind="attr: { title: tbna, href: href }, text: tbna"></a>
        </li>
    </ul>
    <div data-bind="foreach: tabList">
        <div data-bind="attr: { id: id }">
            <p data-bind="text: text"></p>
        </div>
    </div>
</div>

如何在点击时获取我添加到每个标签的“查询”？

感谢您的帮助。

Answer 1

你可以在这些方面尝试一些东西 -

在选项卡上使用knockout and here after calling the calendar , the task name ie empty now绑定 -

<ul data-bind="foreach: tabList">
    <li >
        <a data-bind="attr: { title: tbna, href: href }, text: tbna, click: function(){ $root.someFunction($data); }"></a>
    </li>
</ul>

然后在你的viewModel中，定义click事件处理程序，＆＃34; someFunction＆＃34;如下 -

function someFunction(tab) {
    console.log(tab.tqry);
    // Do stuff with the data related to the clicked tab like above.
}

希望这有帮助。

如何使用Jquery ui - tabs在点击它时获得与每个选项卡关联的“数据”

1 个答案: