如何為jsviews創建自定義屬性處理程序？

Question

我想使用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);
});

jsfidle上的示例

可以看出，默認情況下屬性被muted處理，並且看起來像muted=true或muted=false ，但是在HTML 規范中 -屬性“ muted”可能會也可能不會。 也就是說，to應該在這里充當disable的屬性： 數據鏈接disable和title屬性 。

也許有某種方法可以自定義（替代）jsviews中的標准html屬性處理程序？

Answer 1

您可以使靜音屬性得到取出時muted是false ，通過寫

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

但是，這將無法使事情如您所願地工作，因為動態刪除或添加靜音屬性實際上不會使視頻控件靜音/取消靜音。 為此，您需要將已靜音元素上的已靜音屬性設置為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);
});