以 MVVM 方式处理 html5 视频标签的正确方法是什么？答案

【问题标题】：What is the proper way to handle html5 video tags in an MVVM manner?以 MVVM 方式处理 html5 视频标签的正确方法是什么？
【发布时间】：2013-11-08 17:12:04
【问题描述】：

在我们基于 Durandal 的 SPA 中，我需要一个由我的视图模型严格控制的 html5 视频播放器。视图模型将控制播放、搜索、时间显示、更改源等...为了做到这一点，我的视图模型需要直接引用 html 视频节点，以便它可以访问视频标签上的属性和功能。

现在最简单的方法是在我的视图中添加一个空的视频标签，并使用 jquery 在我的视图模型的compositionComplete() 函数中获取对它的引用。但是，这现在将我的视图模型与我的视图紧密耦合。

我有什么方法可以在我的视图模型中创建 html 标记（通过document.createElement('video')），将其设置为我的视图模型的属性，然后将其添加到页面中？根据 knockoutjs 的文档，html: 数据绑定子句将 .ToString() 标记到 innerHtml 属性，因此 javascript 不会直接引用页面上表示的相同视频标记。

以 MVVM 方式执行此操作的正确方法是什么，或者我最好的选择是使用 jquery 提取视频标签？

谢谢，

【问题讨论】：

标签： javascript mvvm knockout.js durandal

【解决方案1】：

编辑

在进一步研究了淘汰赛绑定之后，我认为最好的解决方案是为每个视频方法和属性创建自定义绑定：

<video data-bind='sources: sourcesArr, volume: videoVolume, playback: playbackState, ...'> </video>

sourcesArr 将是一个可观察的数组

volume 是一个可观察的整数

playbackState 将是一个可观察的字符串，具有“播放”或“暂停”值

原创

我认为（也许）您可以像这样创建视频视图模型和视频自定义绑定

<video data-bind='video: videoViewModel'> </video>

【讨论】：

根据您的原始答案，我能够通过创建一个名为 valueAccessor(element) 的自定义绑定来正确解决原始问题，该绑定将我的视图模型属性设置为标记。这使我可以访问我在视图中创建的任意数量的标签，并使它们对 viewModel 可见。您的编辑是一个有趣的想法，但我不确定如何调用 Play()、Pause() 等元素上的方法...
创建另一个自定义绑定，比如el，其init 函数只是将其目标设置为其element 参数。
是的，调用方法很痛苦。这是后背自定义绑定：jsfiddle.net/k8SFc。如果我要在 WPF 中执行此操作，我将在我的 VM 中提供视图将侦听的事件，但我没有看到任何实现该方法的 KnockoutJS 绑定。更简单的方法（以及我也会做的节省时间的方法）是按照您和@ebohlman 的建议获取元素，但我不认为它是纯粹的 MVVM。

【解决方案2】：

跟进我对 LostInComputer 的回答的评论：

ko.bindingHandlers.el={
  init: function(element, valueAccessor) {
    valueAccessor()(element);
  }
};

用作：

<video data-bind="el: myVideoElement, ..."></video>

现在myVideoElement() 将为您提供视频的 DOM 元素。

【讨论】：

是的，这就是我最终根据 LostInComputer 的原始答案提出的解决方案。