用于 jsRender 或其他模板引擎的内联模板编辑器

Question

我需要一个组件；

1. 在网页中工作以允许非技术用户创建和编辑自定义报告的模板。
2. 允许用户在报表中轻松放置一组符合模板引擎语法的预定义模板数据标记，而无需用户自己知道如何编写语法。
3. 支持更改和更新可在报告中使用的数据项，而无需大量重写代码或创建新插件。

目标是让最终用户为一组特定的 JSON 数据创建自己的个性化模板。创建模板的能力将在网页上可用，并且模板将被存储以供以后使用。存储和使用模板不是问题，但模板的易于使用的编辑器是。

我一直在将 jsRender 用于模板引擎并喜欢它，但如果我需要更容易支持的引擎，我愿意接受其他引擎。

我的目标是拥有一个类似于 MCE 或 CKEditor 的在线编辑器，它能够将预设的数据令牌列表放入用户创建的自定义模板中。这些模板将用于根据提供给模板引擎的数据自动生成内容。

解决方案在用户方面需要相当简单。用户技能的范围可以从“不无知”到“几乎是程序员”。我想避免任何涉及用户实际上必须学习手写 HTML、理解 jsRender 或其他模板库语法的事情。一个可插入数据的下拉列表是理想的。

我认为不需要任何复杂的逻辑语法。我需要的是基本的数据令牌替换，而不是任何复杂的逻辑。

Answer 1

你可以使用jsviews + 内部jsrender。

创建自定义标签：

$.views.tags({
    render : {
        isUpdate : false,
        init : function (tagCtx, linkCtx) {
            var tag = this;
            tag._template = tagCtx.args[0];
            tag._data = tagCtx.args[1];
            tag.template = "<div class='content'></div>";
        },
        _render : function () {
            var tag = this;
            var template = $.templates(tag._template.text);
            tag.linkedElem.html(template.render(tag._data));
        },
        onUpdateTemplate : function () {
            this._render();
        },
        onUpdateData : function () {
            this._render();
        },
        onAfterLink : function (tagCtx, linkCtx) {
            var tag = this;
            tag._template = tagCtx.args[0];
            tag._data = tagCtx.args[1];

            if (tag._.unlinked) {
                if (!tag.linkedElem) {
                    tag.linkedElem = tag._.inline ? tag.contents("*").first() : $(linkCtx.elem);
                }
                $.observable(tag._template).observeAll($.proxy(tag.onUpdateTemplate, tag));
                $.observable(tag._data).observeAll($.proxy(tag.onUpdateData, tag));
            } else {

                $.observable(tag._template).unobserveAll($.proxy(tag.onUpdateTemplate, tag));
                $.observable(tag._data).unobserveAll($.proxy(tag.onUpdateData, tag));
                $.observable(tag._template).observeAll($.proxy(tag.onUpdateTemplate, tag));
                $.observable(tag._data).observeAll($.proxy(tag.onUpdateData, tag));
            }

            tag._render();
        },
        onDispose : function () {
            debugger;
            var tag = this;
            $.observable(tag._template).unobserveAll($.proxy(tag.onUpdateTemplate, tag));
            $.observable(tag._data).unobserveAll($.proxy(tag.onUpdateData, tag));
        },
        onUpdate : function () {
            return false;
        },
        dataBoundOnly : true
    }
});

创建html：

<div id="page"></div>

<script id="templateEditor" type="text/x-jsrender">
    <select data-link="selectedTemplate">
        <option value="-">Please select</option>
        {^{for templates}}
            <option data-link="value{:#index} {:name} selected{:#index == ~root.selectedTemplate}"></option>
        {{/for}}
    </select>

    <button data-link="{on addNew}">Add</button>

    <br/>
    <br/>

    {^{if selectedTemplate!=="-"}}
        template Name:<input data-link="templates[selectedTemplate].name" />
        <br/>
        <br/>
        <textarea name="template" cols="40" rows="5" data-link="templates[selectedTemplate].text trigger=true"></textarea>
    {{/if}}

    <br/>
    <br/>

    {^{if selectedTemplate!=="-"}}
        {^{render templates[selectedTemplate] data/}}
    {{/if}}
</script>

并添加应用代码：

var app = {
    data : {
        value : "test"
    },
    templates : [{
            name : "Main",
            text : "<span>{{:value}}</span>"
        }
    ],
    selectedTemplate : 0,
    addNew : function () {
        $.observable(this.templates).insert({
            name : "new",
            text : ""
        });

    }
};

$([app.templates]).on("arrayChange", function (o, e) {
    if (e.change === "insert") {
        $.observable(app).setProperty("selectedTemplate", e.index);
    }
});
var templateEditor = $.templates("#templateEditor");
templateEditor.link("#page", app);

查看jsfiddle上的实时示例

更新 1：

我认为不需要任何复杂的逻辑语法。我需要的是基本的数据令牌替换，而不是任何复杂的逻辑。

如果您不想使用 jsRender，请使用以下代码：

function template(str, data) {
    return str.replace(/%(\w*)%/g, function (m, key) {
        return data.hasOwnProperty(key) ? data[key] : "";
    });
}

jsfiddle 上的示例