Question

我正在尝试使用客户端模板，并提出了以下概念：

<table>
    <tr bind-template="colors,<td style='color:@color'>@name</td>"></tr>
</table>

我有一个javascript对象，如：

var colors = [{name: 'white', color: '#FFFFFF'},{name: 'black', color: '#000000'}];

所以，从'bind-template'属性，我可以得到实际的对象“colors”，然后是模板本身

<td style='color:@color'>@name</td>

我不擅长正则表达式，但我想出了以下内容：

<td style='color:#FFFFFF'>white</td>
<td style='color:#000000'>black</td

我只是在Array上创建了一个原型，如下所示：

    Array.prototype.HelperResult = function (template, el) {
        var arr = [];
        var result = null;

        $(this).each(function (index, item) {
            result = template;
            for (var o in item) {
                if (template.indexOf('@' + o) >=0)
                {
                    result = result.replace('@' + o, item[o]);
                }
            }
            arr.push(result);
        });

        $(el).append(arr.join(''));
    };

对我而言，这看起来有点笨重，但它确实有效。以下是我称之为此方法的方法：

        var templates = $('[bind-template]');

        $(templates).each(function (index) {
            var attr = $(this).attr('bind-template');

            if (attr) {
                var parts = attr.split(',');
                if (parts.length == 2)
                {
                    self[parts[0]].HelperResult(parts[1], this);
                }
            }
        });

我要清理它，但我需要帮助的是提出一种更清晰的方法来从迭代中获取@color和@name的值，我猜它会妨碍正则表达式我不太清楚。

感谢您的任何想法。再一次，所有这些只是一个概念证明： - ）

全心全意，

Answer 1

为什么要使用regexps？因为他们很酷？ =）

你的代码运作良好，我认为没有理由改变它。

我想要注意的唯一时刻：

我确实没有理由在调用replace（）之前调用indexOf（） - 最后一个会为搜索文本的出现做同样的工作，所以你做了两次工作。
我想我们应该在模板中找到所有@tagname，例如

<td id="@name">@name</td>

所以我的重构将是：

-           if (template.indexOf('@' + o) >=0)
-           {
-               result = result.replace('@' + o, item[o]);
-           }

+           result = result.replace('@' + o, item[o], 'g');

P.S。但如果你想做正则表达式，你可以写

            result = result.replace(new RegExp('@' + o, 'g'), item[o]);

让您的代码更酷。 ;）

带有正则表达式的Javascript模板

1 个答案: