Блог

Главная - Вопросы по программированию - Вывод наблюдаемого значения нокаута, даже если false

Вывод наблюдаемого значения нокаута, даже если false

#knockout.js

#knockout.js

Вопрос:

Я использую наблюдаемый нокаут, вызываемый this.expanded как для обработки, отображать или нет некоторый HTML, так и для использования значения внутри aria-expanded атрибута.

 <button data-bind="attr: { 'aria-expanded': expanded }">
<!-- ko if : expanded -->
   <div>...</div>
<!-- /ko -->

Проблема с использованием моей переменной expanded в обоих случаях заключается в том, что я замечаю, когда expanded значение false, я вообще не получаю вывод aria-expanded атрибута.

 // When expanded is true:
<button aria-expanded="true"></button>

// When expanded is false:
<button></button>

// What I want:
<button aria-expanded="false"></button>

Как я могу по-прежнему выводить атрибут, просто с false помощью, когда expanded false ?

Я попытался создать вторичную переменную, которая проверяла бы наблюдаемое и преобразовывала его в строку:

 this.expandedStatus = this.expanded().toString()

Но я заметил, что expandedStatus , похоже, это больше не обновляется / не наблюдается, если используется таким образом.

Ответ №1:

Вы могли бы просто привязать aria-expanded атрибут к toString() значению наблюдаемого, не вводя нового наблюдаемого. Посмотрите на пример ниже:

 function Test() {
  var self = this;
  self.expanded = ko.observable(false);
  self.toggleExpanded = function() {
    self.expanded(!self.expanded());
  }
}

ko.applyBindings(new Test()); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button data-bind="attr: { 'aria-expanded': expanded().toString() }">
<!-- ko if : expanded -->
   <span>...</span>
<!-- /ko -->
</button>

<p>
  <button data-bind="click: toggleExpanded">Toggle</button>
</p>

Комментарии:

1. Спасибо за ваше решение! В итоге я нашел действительно простой способ сделать это без дополнительных функций (только что опубликовал ответ).

Ответ №2:

В итоге я нашел действительно простое решение, которое заключалось в том, чтобы просто установить aria-expanded через троичный:

 <button data-bind="attr: { 'aria-expanded': expanded() ? 'true' : 'false' }">

Ответ №3:

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

 <button data-bind="isAriaExpanded: expanded ">
<!-- ko if : expanded -->
   <div>...</div>
<!-- /ko -->

…

 ko.bindingHandlers.isAriaExpanded= {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        jQuery(element).attr('aria-expanded',false);//initially setting to false
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      value = valueAccessor();
      valueUnwrapped = ko.unWrap(value);
      jQuery(element).attr('aria-expanded',valueUnwrapped);//whenever the expanded() is changed automatically aria-expanded attribute gets updated
    }
};
Метки: