fastadmin是如何使用art-template的，以及如何在js模板中，嵌套JS模板

Posted 2020-12-10 风意不止

fastadmin中的art-template是如何实现的

art-templat是在require_form.js中实现的。具体代码
html代码

   {foreach  name="selectdata" item="type"  key="k" }
                                    <dl    data-template="answer{$k}" class="fieldlist fieldlist{$k} {$k!=0? ‘hidden‘ : ‘‘}" data-name="row[selectdata{$k}]" data-listidx="0">
                                         <!-- k=0 单选 k=1 多选 k=2 判断 k=3 填空 k=4 简答 k=5 组合 -->
                                        {if condition="$k eq ‘2‘"}
                                        {foreach  name="type" item="option"  key="j" }
                                        <dd class="form-inline">
                                            <ins  class="col-xs-12 col-sm-1"><input type="radio" name="row[answer{$k}]" value="{$option[‘key‘]}"  /></ins>
                                            <ins   class="col-xs-12 col-sm-2"><input type="text" name="row[selectdata{$k}][{$j}][key]" class="form-control" placeholder="选项" size="10" value="{$option[‘key‘]}"  {$k==2? ‘readonly‘ : ‘‘}/></ins>
                                            <ins  class="col-xs-12 col-sm-2"><input id="c-content" data-rule="required" class="form-control" name="row[selectdata{$k}][{$j}][value]"  value="{$option[‘value‘]}"  {$k==2? ‘readonly‘ : ‘‘}></input></ins>
                        
                                           
                                            <!--下面的两个按钮务必保留-->
                                           
                                        </dd>
                                        {/foreach}
                                        {/if}
                                        <!-- k=2表示是判断题，不是判断题的时候，出现追加 -->
                                        {if condition="$k neq ‘2‘"}
                        
                                        <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></dd>
                                        {/if}
                                        <div style="color:red;">*请选中正确答案</div>
                                        <textarea name="row[selectdata{$k}]" class="form-control hide" cols="30" rows="5">{:json_encode($type)}</textarea>
                                    </dl>
                                    {/foreach}

JS代码

 fieldlist: function (form) {
                //绑定fieldlist
                if ($(".fieldlist", form).size() > 0) {
                    require([‘dragsort‘, ‘template‘], function (undefined, Template) {
                        //刷新隐藏textarea的值
                        var refresh = function (name) {
                            var data = {};
                            var textarea = $("textarea[name=‘" + name + "‘]", form);
                            var container = $(".fieldlist[data-name=‘" + name + "‘]");
                            var template = container.data("template");
                            $.each($("input,select,textarea", container).serializeArray(), function (i, j) {
                                var reg = /[(w+)][(w+)]$/g;
                                var match = reg.exec(j.name);
                                if (!match)
                                    return true;
                                match[1] = "x" + parseInt(match[1]);
                                if (typeof data[match[1]] == ‘undefined‘) {
                                    data[match[1]] = {};
                                }
                                data[match[1]][match[2]] = j.value;
                            });
                            var result = template ? [] : {};
                            $.each(data, function (i, j) {
                                if (j) {
                                    if (!template) {
                                        if (j.key != ‘‘) {
                                            result[j.key] = j.value;
                                        }
                                    } else {
                                        result.push(j);
                                    }
                                }
                            });
                            textarea.val(JSON.stringify(result));
                        };
                        //监听文本框改变事件
                        $(document).on(‘change keyup changed‘, ".fieldlist input,.fieldlist textarea,.fieldlist select", function () {
                            refresh($(this).closest(".fieldlist").data("name"));
                        });
                        //追加控制
                        $(".fieldlist", form).on("click", ".btn-append,.append", function (e, row) {
                            var container = $(this).closest(".fieldlist");
                            var tagName = container.data("tag") || "dd";
                            var index = container.data("index");
                            var name = container.data("name");
                            var template = container.data("template");
                            var data = container.data();
                            index = index ? parseInt(index) : 0;
                            container.data("index", index + 1);
                            row = row ? row : {};
                            var vars = {index: index, name: name, data: data, row: row};
                            var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
                            $(html).insertBefore($(tagName + ":last", container));
                            $(this).trigger("fa.event.appendfieldlist", $(this).closest(tagName).prev());
                        });
                        //移除控制
                        $(".fieldlist", form).on("click", ".btn-remove", function () {
                            var container = $(this).closest(".fieldlist");
                            var tagName = container.data("tag") || "dd";
                            $(this).closest(tagName).remove();
                            refresh(container.data("name"));
                        });
                        //渲染数据&拖拽排序
                        $(".fieldlist", form).each(function () {
                            var container = this;
                            var tagName = $(this).data("tag") || "dd";
                            $(this).dragsort({
                                itemSelector: tagName,
                                dragSelector: ".btn-dragsort",
                                dragEnd: function () {
                                    refresh($(this).closest(".fieldlist").data("name"));
                                },
                                placeHolderTemplate: $("<" + tagName + "/>")
                            });
                            var textarea = $("textarea[name=‘" + $(this).data("name") + "‘]", form);
                            if (textarea.val() == ‘‘) {
                                return true;
                            }
                            var template = $(this).data("template");
                            var json = {};
                            try {
                                json = JSON.parse(textarea.val());
                            } catch (e) {
                            }
                            $.each(json, function (i, j) {
                                $(".btn-append,.append", container).trigger(‘click‘, template ? j : {
                                    key: i,
                                    value: j
                                });
                            });
                        });
                    });
                }
            },

如何在JS模板中，引用其他的js模板