Question

我有这个boot -rap的导航标签，

<ul class="nav nav-tabs">
    <!-- ko foreach:tabs -->
    <li><a data-bind="text: $data"></a></li>
    <!-- /ko -->
 </ul>

我希望在点击后，索引将存储在this.tabIndex()中。例如，['Text'，'SMS'，'Call']，然后，如果用户点击“调用”标签，则会将this.tabIndex()设置为2。

如何在此处使用点击装订？

这是我的viewModel，

define(['knockout','jquery','underscore'], function(ko,$,_) {
return function appViewModel() {
    var self = this;
    self.selectedTab = ko.observable(0);

    self.getTab = function(index){
        self.selectedTab(index);
        alert(self.selectedTab());
    }
};
});

Answer 1

您可以使用click绑定并使用内联函数将更新包装到tabIndex observable，并传入当前项的$index来完成此操作。

var vm = {
  tabs: ['Text','SMS','Call'],
  tabIndex: ko.observable(0)
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul>
    <!-- ko foreach:tabs -->
    <li><a data-bind="text: $data, click: function() { $parent.tabIndex($index())}"></a></li>
    <!-- /ko -->
 </ul>

Current tab: <span data-bind="text: tabIndex"></span>

根据您的评论：

如果我在该功能方面还有更多工作怎么办？

您的代码可能如下所示：

var vm = {
  tabs: ['Text','SMS','Call'],
  tabClicked: function(idx) {
    this.tabIndex(idx);
    //further work
  },
  tabIndex: ko.observable(0)
}

然后在你看来：

<a data-bind="text: $data, click: function() { $parent.tabClicked($index()); }"></a>

Answer 2

我建议您使用实际的click: function() { console.log($index()); }作为参考，而不是在数据绑定属性中创建新函数（例如，通过click: doSomething.bind($data, $index())或$data。

click绑定已将click事件和$data发送到其绑定方法。这就是我的意思：

var ViewModel = function() {
  var self = this;
  
  this.tabs = ["one", "two", "three"],
  this.selectedTab = ko.observable(this.tabs[0]);
  this.selectTab = function(data, event) {
      self.selectedTab(data);
  };
}


ko.applyBindings(new ViewModel());

.active { background: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<nav>
  <ul data-bind="foreach: tabs">
    <li data-bind="click: $parent.selectTab, 
                   text: $data,
                   css: {
                     'active': $data === $parent.selectedTab()
                   }"></li>
  </ul>
</nav>

<!-- example with a `with` binding -->
<div data-bind="with: selectedTab">
  <h1>Tab <span data-bind="text: $data"></span></h1>
</div>


<!-- example with a foreach + visible binding -->
<div data-bind="foreach: tabs">
  <div data-bind="visible: $data === $parent.selectedTab()">
    <h1>Tab <span data-bind="text: $data"></span></h1>
  </div>
</div>

因为您正在使用对实际选项卡的引用（在此示例中是一个字符串，但也可以是整个视图模型！），您可以在UI的其他部分中自由使用它而无需查看在阵列中。

获取在淘汰赛中在拱门中单击的值索引

2 个答案: