JUST.js、jqueryTmpl、handlebarsjsなどの文字列テンプレートエンジンが仮想DOMツリー（VUE.js、アンギュラー）に基づくテンプレートエンジンよりも優れている点の1つは、入力しきい値が低く使いやすいことです。また、jqueryのプラグインを文字列テンプレートエンジンと統合する方が簡単だと思います。

ただし、モデルデータとテンプレートをリアクティブにリンクできることは本当に便利なツールであり、VUE.jsと角度を試した後、お気に入りのJUST.JSテンプレートエンジンでそれを見逃しました。

最終的に、一方向のリアクティブデータバインディングをJUST.JSに追加することにし、最終的に、ほとんどすべての文字列テンプレートエンジンで使用できるソリューションを得ました。

簡単な例から始めましょう。

その中で、コードの単純化と視覚化のためにテンプレートエンジンを省きました。この例では、新しい値が1秒に1回変数に割り当てられます。そして、justReactiveはページのdomツリーを変更します。

justReactiveライブラリは、Objectに次のメソッドを追加します。各メソッドは、htmlコードのさまざまな場所に追跡値を挿入するように設計されています。

justHtml-フィルタリングなしで変数のテキストまたはHTMLコードを表示する
justText-変数からのテキストをテキストとして表示し、htmlエンティティをテキストに変換します
justClass-追跡される変数の値がfalseでない場合、クラスを置き換えます
justNotClass-追跡される変数の値がfalseの場合、クラスを置き換えます
justClassName-値自体をクラスとして追跡される変数に置き換えます
justAttr-要素の属性を公開および更新します

動作原理

次の呼び出し：

model.justText('time')

テンプレートに変数を挿入する必要がある場所に挿入する必要があるHTMLコードが返されます。これは冗長です。つまり、変数自体の値に加えて、追加の要素でラップする必要があります。

たとえば、justTextは次のHTMLコードを返します。

 <div id="_justReactive2" style="display: inline;" class="just-watch just-watch-text">1498115282970</div>

このような冗長性はレイアウトを妨げることがありますが、これはページ上の値をさらに直接変更するために必要な価格です。簡単な割り当てを実行することにより。

また、変数に追跡を追加した後、その値がゲッターとセッターを持つオブジェクトに変更されるという事実を考慮する必要があります（この可能性を知らない人のために）、後でそれらを割り当てるときに呼び出されますので、すでにゲッターとセッターの機能をコードで使用している場合紛争の欠如について考える必要があります。

別のユースケース

この例は、前の例に基づいています。ここでは、model.class変数の追跡を追加して要素クラスを変更し、model.hide変数を使用して別の要素を非表示にしました。

アプローチの欠点

このアプローチには、コードを操作するときに考慮する必要がある多くの問題があります。次の状況では、必要なものが得られない場合があります。

 var model = {}; model.key1 = 1; $("#time1").html(model.justText('key1')) model = {key1:2};

この例では、domツリーの値は、model = {key1：2};の割り当てにより更新されません。実際、最初に追跡したmodel.key1を削除してから、同じキーkey1ではなく同じキーを持つ新しいモデルオブジェクトを作成しました。

ループとパターンブロック

私たちが十分に検討したものの個々の要素を変更する。ただし、作業のために、1つの変数を変更するときにテンプレートのブロック全体を変更したい場合があります。たとえば、配列を追跡して別の要素を追加した場合、要素のリスト全体を再構築したいと思います。

この問題を解決するために、要素の1つにhtmlコードの大きなブロックをすぐに挿入できます。

しかし、これは機能しますが、まだあまり便利ではありません。個人的には、 just.jsテンプレートエンジンのフォークを作成し、余分な機能をいくつか追加して、余分だと思われる部分を切り取りました。

生成された変更済みテンプレートエンジンは、 just-templateと呼ばれます

その中に、ネストされたテンプレートブロックをすぐに再構築するモデル変数を追跡するための構造を追加しました。この場合、クロージャを介して、テンプレートの構築中に初めて渡されるすべての変数が利用可能です。

 <~ this.data.itemslist> <% for(var i in this.data.itemslist){ %> <li><%= this.data.itemslist[i].justText('name') %> - <%- this.data.itemslist[i].text %></li> <% } %> <~>

追加されたデータフィルタリング：

 <%- text %> -   <%= text %> -

そして、フロントエンドでのみ使用するため、非同期性を完全にカットし、非同期性がないためコードが大幅に簡素化されます。また、いくつかの異なるテンプレートを呼び出すことで、最終ページを1つずつ組み立てることができます。

配列とループ、パターンを使用した最後の例。

文字列テンプレートエンジンに反応性を追加する

簡単な例から始めましょう。

動作原理

別のユースケース

アプローチの欠点

ループとパターンブロック

参照資料

More articles: