提高敲除自定義綁定的效率（頻繁觸發）

Question

隨附的是自定義綁定處理程序的代碼段，其中包含一些旨在用作無線電組的按鈕。

我的問題是，當我單擊按鈕時，它會觸發更新6次。

我想我需要添加一個油門或以其他方式綁定，但是我是淘汰賽的新手，所以我們將感謝您的幫助。

還是因為它觸發了6次相同的更新，才真正影響淘汰賽性能嗎？

只是朝正確方向的指針就可以了！

 ko.bindingHandlers.buttonGroupChecked = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { if (typeof globalLog !== 'undefined' && globalLog === true){ console.log("buttonGroupInit"); } var value = valueAccessor(); var newValueAccessor = function () { return { click: function () { value($(element).data('value')); } } }; ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { if ($(element).data('value') == ko.unwrap(valueAccessor())) { //$(element).closest('.btn').button('toggle'); $(element).siblings().removeClass('btn-success').addClass('btn-info'); $(element).removeClass('btn-info').addClass('btn-success'); } if (typeof globalLog !== 'undefined' && globalLog === true){ console.log("buttonGroupUpdate" + ko.unwrap(valueAccessor())); } } } var ViewModel = function () { this.optionsValue = ko.observable(2); }; globalLog = true; var vm = new ViewModel(); ko.applyBindings(vm); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="btn-group btn-group-justified"> <a href="javascript:void(0)" class="btn btn-lg btn-info" data-value="1" data-bind="buttonGroupChecked: optionsValue">1</a> <a href="javascript:void(0)" class="btn btn-lg btn-info" data-value="2" data-bind="buttonGroupChecked: optionsValue">2</a> <a href="javascript:void(0)" class="btn btn-lg btn-info" data-value="3" data-bind="buttonGroupChecked: optionsValue">3</a> <a href="javascript:void(0)" class="btn btn-lg btn-info" data-value="4" data-bind="buttonGroupChecked: optionsValue">4</a> <a href="javascript:void(0)" class="btn btn-lg btn-info" data-value="5" data-bind="buttonGroupChecked: optionsValue">5</a> <a href="javascript:void(0)" class="btn btn-lg btn-info" data-value="5+" data-bind="buttonGroupChecked: optionsValue">5+</a> </div> <span data-bind="text: optionsValue"></span> 

Answer 1

我看到您已經自己解決了這個問題，但是我只是想提一下，您不需要自定義綁定即可實現此目的。 這是一個例子

 var ViewModel = function () { this.group1 = ['1','2','3','4','5','5+']; this.optionsValue = ko.observable('2'); }; globalLog = true; var vm = new ViewModel(); ko.applyBindings(vm); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="btn-group btn-group-justified" data-bind="foreach:group1"> <a href="javascript:void(0)" class="btn btn-lg" data-bind="css: { 'btn-success': $parent.optionsValue() == $data, 'btn-info': $parent.optionsValue() != $data}, click: $parent.optionsValue, text: $data"></a> </div> <span data-bind="text: optionsValue"></span> 

Answer 2

以防萬一有人偶然發現這一點，考慮到Dean所說的，這就是我最終要這樣做的方式，它仍然需要一些改進，但應該為某人提供一個良好的起點。

如果可以的話，我只是想擺脫DOM中的$ parent，$ data等（我記得在某處看到了這樣做的方法），但總體來說，這不是一個不好的第一次嘗試。

 //used to abstract out the jQuery dependancies - just in case at some point in the future jQUery is replaced with another library. function activeClassSingle(element, standardClass, activeClass){ $(element).siblings().removeClass(activeClass).addClass(standardClass); $(element).removeClass(standardClass).addClass(activeClass); } ko.bindingHandlers.buttonGroupChecked = { init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { var value = valueAccessor(); var newValueAccessor = function () { return { click: function () { value(allBindingsAccessor.get('val')); } } }; ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext); }, update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { if (allBindingsAccessor.get("val") == ko.unwrap(valueAccessor())) { activeClassSingle(element, "btn-info", "btn-success"); } } } var adults = [ {val: 1, text: "1"}, {val: 2, text: "2"}, {val: 3, text: "3"}, {val: 4, text: "4"}, {val: 5, text: "5"}, {val: 6, text: "5+"} ]; var ViewModel = function () { this.adultsNo = ko.observable(2); }; var vm = new ViewModel(); ko.applyBindings(vm); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="btn-group btn-group-justified" data-bind="foreach: adults"> <div class="btn btn-lg btn-info" data-bind="buttonGroupChecked: $parent.adultsNo, val: $data.val, text: $data.text"></div> </div> <span data-bind="text: adultsNo"></span>