如何为 jsviews 创建自定义属性处理程序？答案

【问题标题】：How create custom attribute handler for jsviews?如何为 jsviews 创建自定义属性处理程序？
【发布时间】：2017-09-27 10:28:54
【问题描述】：

我想用JsViews播放html5视频内容，像这样：

html：

<div id="result"></div>
<script id="myTmpl" type="text/x-jsrender">
    <video autobuffer controls data-link="muted{:muted}">
        <source id="mp4" data-link="src{:src}" type="video/mp4">
    </video>
    <button id="muted">change muted</button>
</script>

js:

var data = {
    src: "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4",
    muted: true
};

var myTmpl = $.templates("#myTmpl");

myTmpl.link("#result", data);

$("#result").on("click", "#muted", function () {
    $.observable(data).setProperty("muted", !data.muted);
});

example on jsfidle

可以看到属性muted 默认处理，看起来像muted=true 或muted=false，但在HTML 中specifications - 属性“静音”可能是也可能不是。也就是说，to 应该表现为 disable 的属性：Data-linking the disabled and title attributes。

也许有一些方法可以自定义（替代）jsviews 中的标准 html 属性处理程序？

【问题讨论】：

标签： javascript jquery html5-video jsrender jsviews

【解决方案1】：

当muted 为false 时，您可以删除 muted 属性，方法是：

<video autobuffer controls data-link="muted{:muted||null}">

但是，由于动态删除或添加 muted 属性实际上不会使视频控件静音/取消静音，因此这不会使事情按您的意愿工作。为此，您需要将 muted 元素上的 muted 属性设置为 true/false。

此外，当用户单击视频元素 UI 上的内置静音控件时，您希望它可以明显地修改您的 muted 数据属性。所有这些都可以使用以下代码：

var video = $("video");

$.observe(data, "muted", function(ev, eventArgs) {
    video[0].muted = eventArgs.value;
})

video.on("volumechange", function() {
    $.observable(data).setProperty("muted", video[0].muted);
});

这是您的 jsfiddle 的更新版本，其中包含更改：http://jsfiddle.net/ck9sr49L/3/。

我打算在下一个 JsViews 中添加一个新功能，以便能够选择数据链接到 HTML 元素上的属性，而不是对应的属性。语法为data-link="prop-muted{:...}"（类似于数据链接到CSS 属性data-link="css-muted{:...}"）。通过该更新，您将能够简化事情并编写以下内容：

模板：

<video autobuffer controls data-link="prop-muted{:muted}">
    <source id="mp4" data-link="src{:src}" type="video/mp4"/>
</video>
<label>Muted: <input type="checkbox" data-link="muted"/></label>

代码：

var data = {
    src: "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4",
    muted: true
};

var myTmpl = $.templates("#theTmpl");

myTmpl.link("#result", data);

$("video").on("volumechange", function(ev) {
    $.observable(data).setProperty("muted", ev.target.muted);
});

【讨论】：