0

できれば「unsafe-eval」を設定せずに Chrome 拡張機能でサポートされている、ある種の JavaScript テンプレート エンジンを探しています。

ここで他の質問を見ると、展開前にテンプレートを事前にコンパイルすることが提案されていますが、「ユーザー」がその場でテンプレートを変更することを許可したくないため（プラグインオプションを介して）、それはうまくいきません。 ..これは、ユーザーがコードを挿入できるようにすることを意図していないため、「unsafe-eval」を必要としないテンプレートエンジンが必要な理由でもあります。JSON オブジェクトのプロパティを使用する非常に単純なテンプレートを作成するだけです。

文字列の置換でほぼ十分です...しかし、ほとんどだけで、いくつかの簡単な評価も必要です...

私はしばらく doT.js を使用してきましたが、これは十分に単純なので、そのセマンティクスに隣接するか、より単純なものです。

これは、doT でのシンプルさの例です...

<div class="card">
    <header class="header {{= it.type }}">
        <div class="project_id">
            <div class="project">{{= it.project }}</div>
            <div class="id">{{= it.id }}</div>
        </div>
        <div class="title">
            <div class="nooverflow">{{= it.type }}: {{= it.summary }}</div>
        </div>
        <div class="sizeheader_size">
            <div class="sizeheader">RELATIVE SIZE</div>
            <div class="size">{{= it.estimate }}</div>
        </div>
    </header>
    <section class="description">
        <div class="nooverflow">{{= it.description }}</div>
    </section>
    <footer class="footer">
        <div class="hours">
            <span class="marked"></span>
            <span class="{{?? it.days > 1 }}marked{{??}}"></span>
            <span class="{{?? it.days > 2 }}marked{{??}}"></span>
            <span class="{{?? it.days > 3 }}marked{{??}}"></span>
            <span class="{{?? it.days > 4 }}marked{{??}}"></span>
            <span class="{{?? it.days > 5 }}marked{{??}}"></span>
            <span class="{{?? it.days > 6 }}marked{{??}}"></span>
            <span class="{{?? it.days > 7 }}marked{{??}}"></span>
            <span class="{{?? it.days > 8 }}marked{{??}}"></span>
            <span class="{{?? it.days > 9 }}marked{{??}}"></span>
        </div>
        <div class="priorityheader_priority">
            <div class="priorityheader">PRIORITY</div>
            <div class="priority">{{= it.priority }}</div>
        </div>
    </footer>
</div>

ご覧のとおり、これは最も複雑な条件ではありません...

4

1 に答える 1

0

テンプレートとテンプレート エンジンを含むサンドボックス ページでテンプレートをレンダリングできます。これは、このサンドボックス ページにメッセージでデータを送信することによって行われます。テンプレートをレンダリングした後、サンドボックスは、コンテンツ スクリプトまたはポップアップでさらに使用できる、レンダリングされたテンプレート html を含む別のメッセージを送り返します。

この記事では、プロセスについて詳しく説明します。また、Chrome 拡張機能のメッセージについても理解しておく必要があります。

于 2012-11-20T06:31:35.547 に答える