Guest User

Untitled

a guest
Jul 17th, 2018
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.12 KB | None | 0 0
  1. <div class="btn-group" data-toggle="buttons">
  2. <label class="btn btn-primary">
  3. <input type="radio" name="options" id="option1" value="1" data-bind="checked: optionsValue"> Option 1
  4. </label>
  5. <label class="btn btn-primary">
  6. <input type="radio" name="options" id="option2" value="2" data-bind="checked: optionsValue"> Option 2
  7. </label>
  8. <label class="btn btn-primary">
  9. <input type="radio" name="options" id="option3" value="3" data-bind="checked: optionsValue"> Option 3
  10. </label>
  11. </div>
  12. <br />
  13. <span data-bind="text: optionsValue"></span>
  14.  
  15. var ViewModel = function() {
  16. this.optionsValue = ko.observable()
  17. };
  18.  
  19. ko.applyBindings(new ViewModel());
  20.  
  21. ko.bindingHandlers.bsChecked = {
  22. init: function (element, valueAccessor, allBindingsAccessor,
  23. viewModel, bindingContext) {
  24. var value = valueAccessor();
  25. var newValueAccessor = function () {
  26. return {
  27. change: function () {
  28. value(element.value);
  29. }
  30. }
  31. };
  32. ko.bindingHandlers.event.init(element, newValueAccessor,
  33. allBindingsAccessor, viewModel, bindingContext);
  34. },
  35. update: function (element, valueAccessor, allBindingsAccessor,
  36. viewModel, bindingContext) {
  37. if ($(element).val() == ko.unwrap(valueAccessor())) {
  38. setTimeout(function () {
  39. $(element).closest('.btn').button('toggle');
  40. }, 1);
  41. }
  42. }
  43. }
  44.  
  45. <label class="btn btn-primary">
  46. <input type="radio" name="options" id="option1" value="1"
  47. data-bind="bsChecked: optionsValue"> Option 1
  48. </label>
  49.  
  50. <div class="btn-group" data-toggle="buttons">
  51. <label data-bind="css: { active: !HideInLeaderboards() },
  52. click: function () { HideInLeaderboards(false); },
  53. clickBubble: false"
  54. class="btn btn-default">
  55. Show Name
  56. </label>
  57. <label data-bind="css: { active: HideInLeaderboards() },
  58. click: function () { HideInLeaderboards(true); },
  59. clickBubble: false" class="btn btn-default">
  60. Hide Name
  61. </label>
  62. </div>
  63.  
  64. ko.bindingHandlers.bsChecked = {
  65. init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  66. var value = valueAccessor();
  67. var newValueAccessor = function () {
  68. return {
  69. change: function () {
  70. value(element.value);
  71. }
  72. }
  73. };
  74. if ($(element).val() == ko.unwrap(valueAccessor())) {
  75. $(element).closest('.btn').button('toggle');
  76. }
  77. ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
  78. }
  79. }
  80.  
  81. // Knockout checked binding doesn't work with Bootstrap radio-buttons
  82. ko.bindingHandlers.radio = {
  83. init: function (element, valueAccessor) {
  84.  
  85. if (!ko.isObservable(valueAccessor())) {
  86. throw new Error('radio binding should be used only with observable values');
  87. }
  88.  
  89. $(element).on('change', 'input:radio', function (e) {
  90. // we need to handle change event after bootsrap will handle its event
  91. // to prevent incorrect changing of radio button styles
  92. setTimeout(function() {
  93. var radio = $(e.target),
  94. value = valueAccessor(),
  95. newValue = radio.val();
  96.  
  97. value(newValue);
  98. }, 0);
  99. });
  100. },
  101.  
  102. update: function (element, valueAccessor) {
  103. var $radioButton = $(element).find('input[value="' + ko.unwrap(valueAccessor()) + '"]'),
  104. $radioButtonWrapper;
  105.  
  106. if ($radioButton.length) {
  107. $radioButtonWrapper = $radioButton.parent();
  108.  
  109. $radioButtonWrapper.siblings().removeClass('active');
  110. $radioButtonWrapper.addClass('active');
  111.  
  112. $radioButton.prop('checked', true);
  113. } else {
  114. $radioButtonWrapper = $(element).find('.active');
  115. $radioButtonWrapper.removeClass('active');
  116. $radioButtonWrapper.find('input').prop('checked', false);
  117. }
  118. }
  119. };
Add Comment
Please, Sign In to add comment