Управление видимостью элементов div на основе выбора переключателя

Question

Я относительно новичок в нокауте и задавался вопросом, есть ли лучший способ контролировать видимость двух элементов div, основанных на выборе группы переключателей.

Что я придумал, кажется довольно хрупким, и если бы они были дополнительными вариантами, это решение не масштабировало бы imo.

<label>Total</label><input type="radio" name="toggleGraph" value="total" data-bind="checked: toggleGraph" /> 
<label>Growth</label><input type="radio" name="toggleGraph" value="growth" data-bind="checked: toggleGraph" /> 

<div id="total-graph" data-bind="visible: $root.toggleGraph() === 'total'"> 
    Total Graph Here 
</div> 

<div id="growth-graph" data-bind="visible: $root.toggleGraph() === 'growth'"> 
    Growth Graph Here 
</div> 



var ViewModel = function() { 
    var self = this; 
    self.toggleGraph = ko.observable('total'); 
} 

ko.applyBindings(new ViewModel()); 

http://jsfiddle.net/pqzhL/

Answer 1

Ваш текущий подход хорошо. Вам нужно наблюдать (toggleGraph), чтобы сохранить выбор, и в зависимости от его значения вы можете показать скрыть свой div.

Если вы хотите использовать логику, когда total или growth выбран вы можете переместить логику проверки с вашей точки зрения на ваш ViewModel в вычисляемых свойств:

<div id="total-graph" data-bind="visible: isTotalSelected"> 
    Total Graph Here 
</div> 

<div id="growth-graph" data-bind="visible: isGrowthSelected"> 
    Growth Graph Here 
</div> 

var ViewModel = function() { 
    var self = this; 
    self.toggleGraph = ko.observable('total'); 
    self.isTotalSelected = ko.computed(function() { 
     return self.toggleGraph() === 'total' 
    }); 
    self.isGrowthSelected = ko.computed(function() { 
     return self.toggleGraph() === 'growth' 
    }); 
} 

Но если у вас есть много вариантов этого решения не масштабируется, потому что вам нужно создать множество вспомогательных свойств.

Или вы можете создать пользовательские связывания обработчик, который делает некоторые на основе проверки конвенции, которая сравнивает div идентификатор с выбранным значением:

ko.bindingHandlers.visibleIfIdStartsWith = { 
    update: function (element, valueAccessor, allBindingsAccessor, 
         viewModel, bindingContext) { 
     var newAccessor = function() { 
      return element.id.indexOf(valueAccessor()()) === 0; 
     } 
     ko.bindingHandlers.visible.update(element, newAccessor, 
      allBindingsAccessor, viewModel, bindingContext); 
    } 
}; 

Затем использовать его как это:

<div id="total-graph" data-bind="visibleIfIdStartsWith: toggleGraph"> 
    Total Graph Here</div> 
<div id="growth-graph" data-bind="visibleIfIdStartsWith: toggleGraph"> 
    Growth Graph Here</div> 

Демо JSFiddle.