Question

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

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

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

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

谢谢，

Answer 1

修改

在进一步查看敲除绑定后，我认为最佳解决方案是为每个视频方法和属性创建自定义绑定：

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

sourcesArr将是一个可观察的数组

音量是一个可观察的整数

playbackState将是一个带有'play'或'pause'值的可观察字符串

<强>原始

我认为（也许）您可以创建视频视图模型和视频自定义绑定，如此

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

Answer 2

跟我对LostInComputer的回答发表评论：

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

用作：

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

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

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

2 个答案: