Wie erstellen benutzerdefinierte Attribut-Handler für jsviews?

Question

Ich möchte JsViews verwenden html5 Video-Inhalte, wie diese zu spielen:

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

Wie sein gesehen Attribut muted Proce ssed standardmäßig und sieht aus wie muted=true oder muted=false, aber in HTML specifications - Attribut "stumm" kann oder kann nicht sein. Das heißt, sich als Attribut einer disable hier zu verhalten: Data-linking the disabled and title attributes.

Vielleicht gibt es eine Möglichkeit, den Standard-HTML-Attribut-Handler in jsviews anzupassen (ersetzen)?

Answer 1

Sie können das gedämpfte Attribut machen entfernt werden, wenn mutedfalse ist, durch Schreiben:

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

aber das wird nicht die Dinge funktionieren, wie Sie da die dynamisch wollen entfernen oder das gedämpfte Attribut Zugabe nicht die Videosteuerung tatsächlich ein-/ausschalten. Dazu müssen Sie die stumme Eigenschaft des stummgeschalteten Elements auf true/false setzen.

Auch wenn der Benutzer auf das integrierte Mute-Steuerelement auf der Benutzeroberfläche des Videoelements klickt, möchten Sie, dass Ihre muted Dateneigenschaft sichtbar verändert wird. Alles, was mit dem folgenden Code arbeiten gemacht werden kann:

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

Hier ist eine aktualisierte Version Ihres jsfiddle, mit den Änderungen: http://jsfiddle.net/ck9sr49L/3/.

Ich beabsichtige, ein neues Feature in den nächsten JsViews hinzuzufügen, um die Möglichkeit zu wählen, eine Verknüpfung zu einer Eigenschaft in einem HTML-Element anstatt zu dem entsprechenden Attribut herzustellen. Die Syntax lautet data-link="prop-muted{:...}" (ähnlich der Datenverknüpfung mit einer CSS-Eigenschaft data-link="css-muted{:...}"). Mit diesem Update können Sie die Dinge vereinfachen und schreiben folgendes:

Vorlage:

<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> 

Code:

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