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 回答