jsviewsのカスタム属性ハンドラを作成するにはどうすればいいですか？

Question

私はこのように、HTML5のビデオコンテンツを再生するためにJsViewsを使用したい：

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 proceデフォルトではssedで、muted=trueまたはmuted=falseのように見えますが、HTMLのspecificationsには、「ミュート」という属性が表示されている場合と表示されていない場合があります。つまり、disableの属性として動作する必要があります。Data-linking the disabled and title attributes。

jsviewsで標準のhtml属性ハンドラをカスタマイズ（代替）する方法がありますか？ mutedが書き込みにより、falseとき

Answer 1

あなたはミュート属性が削除されますすることができます：

しかし、あなたが望むようなものがあるために動作することはありませんその

<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); 
});