javascript - Knockout で Html 5 Video Controls 属性をバインドする方法

Question

Knockout で html 5 コントロール属性を条件付きで発行する必要があります。つまり、コントロールを発行するときと発行しないときがあります。attr バインディングは機能しませんか? それを機能させるものはありますか？

Answer 1

はい、attr binding返す必要があるだけでこれを行うことができます。nullまたはundefined、オブザーバブルから KO は指定された属性を発行しません。

<video id="movie" width="320" height="240" 
       data-bind="attr: {controls: enableControls}">
   <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
<button data-bind="{click: click}" >Add/Remove Controls </button>

そしてあなたのviewModelで：

var ViewModel = function()
{
  var self = this;
  self.enableControls = ko.observable(true);
  self.click = function()
  {
    if (self.enableControls())
      self.enableControls(null);
    else
      self.enableControls(true);
  }

}

ko.applyBindings(new ViewModel());

JSFiddleのデモ。