如何爲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); 
}); 

example on jsfidle

既然可以看到屬性muted程序默認情況下，看起來像muted=true或muted=false，但在HTML specifications - 屬性「靜音」可能會或可能不會。也就是說，應該表現爲disable這裏的屬性：Data-linking the disabled and title attributes。

也許有一些方法來定製（替代）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); 
});