Question

我需要一个可以的组件

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

目标是让最终用户为特定的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

jsRender或其他模板引擎

1 个答案: