データリンクされたプロパティエディタのJsViewsテンプレート

Question

JsViewsで「汎用」プロパティエディタを実現する方法はありますか？私は自分自身を説明することができるかどうか見てみましょう ：私は大体言い換えれば、この

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

ようなものを持っているしたいのですが、私は、コードの複製を回避するために、テンプレート内のリンクやや動的なデータを作成したいです。 これはできますか？

Answer 1

はい - これは可能です。このドキュメントのページには、サンプルがあります：http://www.jsviews.com/#jsvviewobject。 を探します。サンプル：view.childTags（）

それはあなたが編集可能と非編集可能に切り替えることができ{textbox}タグを定義：編集可能性を切り替えることではなく、視認性よりも、テンプレートの切り替えを使用して、ここでバリアントhttps://github.com/BorisMoore/jsviews/issues/134#issuecomment-216694113もあり

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

を...