Question

有任何方法可以实现＆＃34;泛型＆＃34;使用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}标记，您可以在可编辑和不可编辑之间切换：

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

此处还有一个变体https://github.com/BorisMoore/jsviews/issues/134#issuecomment-216694113，它使用模板切换而不是切换可编辑性的可见性......

用于数据链接属性编辑器的JsViews模板

1 个答案: