Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="btn-group" data-toggle="buttons">
- <label class="btn btn-primary">
- <input type="radio" name="options" id="option1" value="1" data-bind="checked: optionsValue"> Option 1
- </label>
- <label class="btn btn-primary">
- <input type="radio" name="options" id="option2" value="2" data-bind="checked: optionsValue"> Option 2
- </label>
- <label class="btn btn-primary">
- <input type="radio" name="options" id="option3" value="3" data-bind="checked: optionsValue"> Option 3
- </label>
- </div>
- <br />
- <span data-bind="text: optionsValue"></span>
- var ViewModel = function() {
- this.optionsValue = ko.observable()
- };
- ko.applyBindings(new ViewModel());
- ko.bindingHandlers.bsChecked = {
- init: function (element, valueAccessor, allBindingsAccessor,
- viewModel, bindingContext) {
- var value = valueAccessor();
- var newValueAccessor = function () {
- return {
- change: function () {
- value(element.value);
- }
- }
- };
- ko.bindingHandlers.event.init(element, newValueAccessor,
- allBindingsAccessor, viewModel, bindingContext);
- },
- update: function (element, valueAccessor, allBindingsAccessor,
- viewModel, bindingContext) {
- if ($(element).val() == ko.unwrap(valueAccessor())) {
- setTimeout(function () {
- $(element).closest('.btn').button('toggle');
- }, 1);
- }
- }
- }
- <label class="btn btn-primary">
- <input type="radio" name="options" id="option1" value="1"
- data-bind="bsChecked: optionsValue"> Option 1
- </label>
- <div class="btn-group" data-toggle="buttons">
- <label data-bind="css: { active: !HideInLeaderboards() },
- click: function () { HideInLeaderboards(false); },
- clickBubble: false"
- class="btn btn-default">
- Show Name
- </label>
- <label data-bind="css: { active: HideInLeaderboards() },
- click: function () { HideInLeaderboards(true); },
- clickBubble: false" class="btn btn-default">
- Hide Name
- </label>
- </div>
- ko.bindingHandlers.bsChecked = {
- init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
- var value = valueAccessor();
- var newValueAccessor = function () {
- return {
- change: function () {
- value(element.value);
- }
- }
- };
- if ($(element).val() == ko.unwrap(valueAccessor())) {
- $(element).closest('.btn').button('toggle');
- }
- ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
- }
- }
- // Knockout checked binding doesn't work with Bootstrap radio-buttons
- ko.bindingHandlers.radio = {
- init: function (element, valueAccessor) {
- if (!ko.isObservable(valueAccessor())) {
- throw new Error('radio binding should be used only with observable values');
- }
- $(element).on('change', 'input:radio', function (e) {
- // we need to handle change event after bootsrap will handle its event
- // to prevent incorrect changing of radio button styles
- setTimeout(function() {
- var radio = $(e.target),
- value = valueAccessor(),
- newValue = radio.val();
- value(newValue);
- }, 0);
- });
- },
- update: function (element, valueAccessor) {
- var $radioButton = $(element).find('input[value="' + ko.unwrap(valueAccessor()) + '"]'),
- $radioButtonWrapper;
- if ($radioButton.length) {
- $radioButtonWrapper = $radioButton.parent();
- $radioButtonWrapper.siblings().removeClass('active');
- $radioButtonWrapper.addClass('active');
- $radioButton.prop('checked', true);
- } else {
- $radioButtonWrapper = $(element).find('.active');
- $radioButtonWrapper.removeClass('active');
- $radioButtonWrapper.find('input').prop('checked', false);
- }
- }
- };
Add Comment
Please, Sign In to add comment