使用模板实现的模板替换元标记的问题

时间:2016-11-19 02:31:28

标签: javascript templates jsrender

我试图通过模糊我想在结果模板中使用的数据变量占位符的标记来设置模板模板...我的替换js代码出错了似乎是因为某种原因跳过标记开始替换< / p>

renderDoubleOrderTemplate = function renderDoubleOrderTemplate(secondOrderTemplate, options) {
            $.templates("secondOrderTemplate", secondOrderTemplate);
            var firstOrderTemplateMarkup = $.render.secondOrderTemplate(options);
            if (debug) console.log("firstOrderTemplateMarkup: " + firstOrderTemplateMarkup);
            var rNewLine = /[ \t]*(\r\n|\n|\r)/g;
            //remove new lines before meta template replace
            firstOrderTemplateMarkup = firstOrderTemplateMarkup.replace(rNewLine, "");
            firstOrderTemplateMarkup = firstOrderTemplateMarkup.replace("  ", " ");
            String.prototype.replaceAll = function(search, replacement) {
                var target = this;
                return target.split(search).join(replacement);
            };

            var firstOrderTemplateString = firstOrderTemplateMarkup.replaceAll('[[@', '{{:');
            firstOrderTemplateString = firstOrderTemplateMarkup.replaceAll('[[|', '{{/');
            firstOrderTemplateString = firstOrderTemplateMarkup.replaceAll('[[', '{{');
            firstOrderTemplateString = firstOrderTemplateMarkup.replaceAll(']]', '}}');


            if (debug) console.log(firstOrderTemplateString);
            return firstOrderTemplateString
        },

在运行代码之前

{{for inputFieldArray}}
    <div class="form-group"><label class="col-sm-4 control-label" label-required="*">{{:fieldDisplyLabel}}</label>
        <div class="col-sm-8">
            <li class="dropdown" style="list-style-type:none;"><input type="{{:type}}" class="adduser-input form-control" id="{{:name}}-input" name="{{:name}}" [[if currentInput.{{:name}}]] value=[[@currentInput.{{:name}}]][[|if]] autocomplete="off">
                <ul id="{{:name}}-input-sugggest" class="dropdown-menu" style="z-index:1000">
                    {{for suggestions}}
                    <li><a class="suggestion" id="firstName-{{#index}}" href="#">[[@{{:name}}]]</a></li>
                    {{/for}}
                </ul>
            </li>
        </div>
    </div>
    {{/for}}

在第二个命令(模板的模板)上运行上面的代码之后的HTML看起来像这些字符序列没有被替换

<div class="form-group"><label class="col-sm-4 control-label" label-required="*">First Name</label>
        <div class="col-sm-8">
            <li class="dropdown" style="list-style-type:none;"><input type="text" class="adduser-input form-control" id="firstName-input" name="firstName" [[if currentInput.firstName}} value=[[@currentInput.firstName}}[[|if}} autocomplete="off">
                <ul id="firstName-input-sugggest" class="dropdown-menu"
                    style="z-index:1000"> </ul>
            </li>
        </div>
    </div>

所以我只是喜欢我的替换逻辑有什么问题,显然想让结果呈现的html字符串对jsrender有效所以现在创建模板我可以合并数据来创建最终渲染

2 个答案:

答案 0 :(得分:0)

我没有仔细查看您的代码以找到错误...我建议您使用API​​功能 $.views.settings.delimiters(...); 在备用分隔符之间来回切换。这样,您就不需要编写任何字符串替换代码。

请参阅示例:Using alternative delimiters to 'render a template with a template'

答案 1 :(得分:0)

最后我发现以下逻辑有效......我的代码中没有任何错误,可能会疏忽一些小的副作用,阻止其他人以其他方式执行此操作...感谢您的回答

  renderDoubleOrderTemplate = function renderDoubleOrderTemplate(secondOrderTemplate, options) {
        $.templates("secondOrderTemplate", secondOrderTemplate);
        var firstOrderTemplateMarkup = $.render.secondOrderTemplate(options);

        //remove new lines before meta template replace
        firstOrderTemplateMarkup = firstOrderTemplateMarkup.replace(/[ \t]*(\r\n|\n|\r)/g, "");
        firstOrderTemplateMarkup = firstOrderTemplateMarkup.replace("  ", " ");

        var firstOrderTemplateString = "";
        for (var i = 0; i < firstOrderTemplateMarkup.length; i = i + 1) {
            var replace = false;
            var char = firstOrderTemplateMarkup.charAt(i);
            if (char === '[' || char === ']') {
                if (char === '[') {
                    firstOrderTemplateString = firstOrderTemplateString.concat('{{');
                    replace = true;
                }
                if (char === ']') {
                    firstOrderTemplateString = firstOrderTemplateString.concat('}}');
                    replace = true;
                }

                var nextchar = firstOrderTemplateMarkup.charAt(i + 1);
                if (nextchar === '@' || nextchar === '|') {

                    if (nextchar === '@') {
                        firstOrderTemplateString = firstOrderTemplateString.concat(':');
                        replace = true;
                    }
                    if (nextchar === '|') {
                        firstOrderTemplateString = firstOrderTemplateString.concat('/');
                        replace = true;
                    }
                    i = i + 1; //skip to next
                }
            }
            if (replace === false) firstOrderTemplateString = firstOrderTemplateString.concat(char);
        }

        return firstOrderTemplateString
    },

但是,是的,避免替换代码似乎是答案,不会介意找出阻止其他方式工作的js怪异......虽然不是今天