javascript - 如何在 Knockout 中绑定 Html 5 Video Controls 属性

Question

我需要在 Knockout 中有条件地发出 html 5 控件属性。我的意思是有时我会发出控件，有时不会。attr 绑定不起作用？有什么东西可以让它工作。

Answer 1

是的，您可以使用attr binding您只需要返回null或undefined从您的 observable 执行此操作，然后 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>

在您的视图模型上：

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。