数据链接 属性 编辑器的 JsViews 模板
JsViews template for data-linked property editor
有什么方法可以用 JsViews 实现 "generic" 属性 编辑器?
让我们看看我是否可以解释自己:我想要大致像这样的东西
<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>
换句话说,我想在模板中创建一个有点动态的数据链接,以避免代码复制。
这能做到吗?
是的 - 你可以做到。此文档页面上有一个示例: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 实现 "generic" 属性 编辑器? 让我们看看我是否可以解释自己:我想要大致像这样的东西
<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>
换句话说,我想在模板中创建一个有点动态的数据链接,以避免代码复制。 这能做到吗?
是的 - 你可以做到。此文档页面上有一个示例: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,它使用模板切换而不是可见性来切换可编辑性...