javascript - 如何在 Knockout 中绑定(bind) Html 5 视频控件属性

Question

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

Answer 1

是的，你可以使用attr绑定(bind)来做到这一点，你只需要从你的可观察对象中返回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 .