JsViews-Vorlage für Data-Linked-Eigenschafteneditor

Question

Gibt es eine Möglichkeit, einen "generischen" Eigenschafteneditor mit JsViews zu erreichen? Mal sehen, ob ich mich erklären kann: Ich habe etwas wie diese mit anderen Worten

<script type="text/x-jsrender"> 
    {{include #data.property1 tmpl="#propeditor" /}} 
    {{include #data.property2 tmpl="#propeditor" /}} 
    {{include #data.property3 tmpl="#propeditor" /}} 
</script> 

<script type="text/x-jsrender" id="propeditor"> 
    <div class="editableField"> 
    <div> 
     <span class="[onClickHideMeAndShowTheDataLinkedInput]"> 
     {^{>[ref to prop]}} 
     </span> 
     </div> 
     <input type="text" data-link="[prop name] trigger=true" style="display:none;" class="[onBlurShowThePlainTextAgain]" /> 
     </div> 
</script> 

grob haben möge, mag ich innerhalb einer Vorlage ein etwas dynamischen Daten erstellen Verknüpfung, Code-Replikation zu vermeiden. Kann dies getan werden?

Answer 1

Ja - das können Sie tun. Auf dieser Dokumentationsseite finden Sie ein Beispiel: http://www.jsviews.com/#jsvviewobject. Suchen Sie nach Beispiel: view.childTags().

Es definiert eine {textbox} markieren, die Sie zwischen editierbaren und nicht editierbaren umschalten:

$.views.tags({ 
    textbox: { 
    init: function() { 
     var path = this.tagCtx.params.props.path + " trigger=true"; 

     this.template = "<input data-link='~tag.edit' type='checkbox'/> " // Checkbox to toggle edit 
     + "<input data-link='visible{:~tag.edit} {:" + path + ":}'/>"  // <input> for editing 
     + "<span data-link='visible{:!~tag.edit} {:" + path + "}'></span>"; // <span> for rendering 
    }, 
    toggleEdit: function() { 
     $.observable(this).setProperty("edit", !this.edit); 
    } 
    } 
}); 

Es gibt auch eine Variante hier https://github.com/BorisMoore/jsviews/issues/134#issuecomment-216694113 die Vermittlung von Vorlagen verwendet, anstatt Sichtbarkeit Editierbarkeit zu wechseln ...