1

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

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

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

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

谢谢，

4

2 回答 2

1

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

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

用于：

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

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

于 2013-10-29T21:25:36.457 回答
1

编辑

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

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

sourcesArr 将是一个可观察的数组

体积将是一个可观察的整数

播放状态将是具有“播放”或“暂停”值的可观察字符串

原来的

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

<video data-bind='video: videoViewModel'> </video>
于 2013-10-29T14:31:38.737 回答