3

これまでmustacheのところは素晴らしいですが、ロジックレスは機能していないようです。ユーザーの電子メールと名前を含めることができるテンプレートをレンダリングする必要があるとします。

電子メールと名前の両方が存在する場合、レンダリング結果は次のようになります。

<a href="mailto:EMAIL">NAME</a>

電子メールが存在するが名前が存在しない場合、結果は次のようになります。

<a href="mailto:EMAIL">EMAIL</a>

名前だけが存在する場合、テンプレートは次のようにレンダリングされます。

NAME

だから今、私は次のようなことをしなければなりません:

{{#email}}<a href="mailto:{{email}}">{{#name}}{{name}}{{/name}}{{^name}}{{email}}{{/name}}</a>{{/email}}{{^email}}{{name}}{{/email}}

これはとても醜いです！条件はこれだけ！さらに必要な場合はどうすればよいですか？で同じことを行う別の方法があるべきだと思いmustacheます。それともすべきではありませんか？

ですから、口ひげの開発者は、ロジックレスであることは良いことだと考えていますが、私には反論があります。ほとんどの場合、テンプレート内の変数をチェックする必要があります (ほとんどの場合、存在のみをチェックする必要があります)。だから私は次のようなことをします：

{% if email %}{{ email }}{% else %}{{ name }}{% endif %}

そして、これははるかに包括的に見えます

{{#email}}{{email}}{{/email}}{{^email}}{{name}}{{/email}}

ではない？

私nameもチェックする必要がある場合：

{% if email %}{{email}}{% elif name %}{{name}}{% else %}Anonymous{% endif %}

対

{{#email}}{{email}}{{/email}}{{^email}}{{#name}}{{name}}{{/name}}{{^name}}Anonymous{{/name}}{{/email}}

いいえの場合、でテンプレートをレンダリングするための別のテンプレート ライブラリを提案していただけますjavascriptか? (jQuery-plugin) との統合jQueryは利点ですが、必須ではありません。自分で行うことができます。

ありがとう。

4

1 に答える 1

3

バニラMustache（Mustacheのスーパーセット）よりも少し機能が豊富なハンドルバーが常にあります。もちろん、JSで利用できる他の無数のテンプレートエンジンを使用できます。ハンドルバーを使用する場合は、次のように、複数の引数を受け入れるバージョンのブロックヘルパーを再実装することもできます{{#if}}（警告：ごくわずかにテストされ、ほとんど頭のてっぺんから書きます）

Handlebars.registerHelper('if', function() {
    var args = Array.prototype.slice.call(arguments),
        options = args.splice(-1, 1)[0],
        allPass = true,
        context;

    for (var i = 0; i < args.length; i++) {
        context = args[i];

        if(Object.prototype.toString.call(context) === "[object Function]") { 
            context = context.call(this);
        }

        if (!context || Handlebars.Utils.isEmpty(context)) {
            allPass = false;
            break;
        }
    }

    if(allPass) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

次のように使用します。

var template = "{{#if a b c}}pass{{else}}fail{{/if}}";
var c = Handlebars.compile(template);
console.log(c({a: true, b: pass, c: true}))

ある種の複合論理演算子を実装しているため、これは純粋主義者によって「不正行為」と見なされる可能性があることに注意してください。さらに、不確定な量のパラメータを受け入れるようになります。Mustacheのポイントは、プログラミング言語間で簡単に移植できる最小限の仕様を用意して、バックエンドとフロントエンドでテンプレートを交換可能に再利用できるようにすることです。

于 2012-12-10T19:11:56.280 に答える