獲取通過點擊在archor在淘汰賽

我舉的這個導航，標籤上的價值指數，獲取通過點擊在archor在淘汰賽

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

我想的是，點擊後，該指數將被存儲在this.tabIndex()。例如，[「文字」，「短信」，「呼叫」]，然後如果用戶點擊到「通話」選項卡，將設置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()); 
    } 
}; 
});

來源

2016-09-30 JMA

你的'tabs'（observable？）數組在哪裏？你的編輯建議你在視圖模型的兩個完全不同的層次上工作，所以根據我的回答使用'$ parent'不會達到上述目的。 –

啊是的。我刪除了self.tabs = ko.observableArray（） – JMA

您可以通過使用click結合和包裝的更新到tabIndex觀察到與內聯函數，通過在當前項目的$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>

來源

2016-09-30 09:37:41

如果我在該函數中有更多的工作要做什麼呢？我可以使用$ parent.bind（function，param1，param2）嗎？怎麼樣？ – JMA

如果需要，您可以將其交換出一個完全不同的函數 - 在您的viewmodel上創建一個與tabIndex相同的函數，將'$ index（）'參數傳遞給該函數，並使用該函數更新'tabIndex'參數，以及您需要的任何其他工作 –

您可以提供樣品嗎？我無法理解你的評論。 – JMA

而不是創建您的數據綁定屬性的新功能（例如，通過click: function() { console.log($index()); }或click: doSomething.bind($data, $index())，我建議使用實際的$data作爲參考。

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的其他部分自由使用它，而無需在陣列中查找它。

來源

2016-09-30 10:51:29 user3297291

獲取通過點擊在archor在淘汰賽

回答

相關問題