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'}];

したがって、「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 の値を取得するためのよりクリーンな方法を考え出すことです。よくわからない。

アイデアをありがとう。繰り返しますが、これは単なる概念実証です:-)

皆さんありがとう、

4

1 に答える 1

0

なぜ正規表現を使いたいのですか? 彼らはクールだから？=)

あなたのコードはうまく機能します。大きく変更する理由はないと思います。

私が注目したい唯一の瞬間：

  1. replace() を呼び出す前に indexOf() を呼び出す理由はないと思います。最後のものは、テキストの出現を検索するために同じ作業を行うため、作業を 2 回行いました。

  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 に答える