1

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

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

我有一个 javascript 对象，如下所示：

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

所以，从“绑定模板”属性，我可以得到实际的对象“颜色”，然后是模板本身

<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 的值，我猜这将是我不使用的正则表达式的方式不太清楚。

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

谢谢大家，

4

1 回答 1

0

为什么要使用正则表达式？因为他们很酷？=)

您的代码运行良好，我认为没有理由对其进行太多更改。

我想注意的唯一时刻：

  1. 我确实相信在调用 replace() 之前没有理由调用 indexOf() - 最后一个会为搜索文本的出现做同样的工作，所以你做了两次工作。

  2. 我想我们应该@tagname在模板中找到所有出现的情况，例如

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

所以我的重构将是：

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

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

PS 但是如果你想做正则表达式，你可以写

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

并使您的代码更酷。;)

于 2012-08-11T21:21:58.040 回答