即使为假，也输出 Knockout 可观察值答案

【问题标题】：Output Knockout observable value even if false即使为假，也输出 Knockout 可观察值
【发布时间】：2021-05-08 23:15:05
【问题描述】：

我正在使用名为 this.expanded 的 Knockout observable 来处理是否呈现某些 HTML，并使用 aria-expanded 属性中的值。

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

在这两种情况下使用我的变量expanded 的问题是我注意到当expanded 为假时，我根本没有得到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>

当expanded 为假时，我怎样才能仅使用false 输出属性？

我尝试创建一个辅助变量来检查 observable 并将其转换为字符串：

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

但我注意到expandedStatus 如果以这种方式使用，似乎不再更新/观察。

【问题讨论】：

标签： knockout.js

【解决方案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>

【讨论】：

感谢您的解决方案！我最终找到了一种非常简单的方法来做到这一点而无需额外的功能（刚刚发布了答案）。

【解决方案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
    }
};

【讨论】：