knockoutJS学習ノート02:jsRenderテンプレートエンジン

前回の最後にテンプレートについて言及し、自分で最も簡単なバージョンを作成しようとしました.jqtmplを使ったことがある友人もいるかもしれませんが、これはjqueryベースのテンプレートエンジンですが、更新されず、レンダリング速度が遅いと言われています.ここではもう一つのテンプレートエンジン:jsRenderについて説明します.個人的にはこれらのものは勉強するのは簡単だと思います.一つ選んで見ればいいですが、実際にどれを使ったのか、公式サイトでdemoを見ても使えます.jsRendererを選択したのは、次のような特徴があるからです.

単純直観

機能強力

拡張可能な

稲妻のように速い

もちろん、誰もが自分の製品を自分で定義します.しかし、私が使い終わった後、確かにそれを発見しました:簡単で直感的で、機能が強くて、拡張性が強いです;稲妻のように速く...興味のある友达はどれだけ速いかテストすることができます!次にjsRenderの運用を学びましょう.ここでは1.0バージョンを使用しています.
一、基礎
jsRenderの3つの最も重要な概念:テンプレート、コンテナ、データ.最も重要なのは、view(ビュー)は私たちが定義したテンプレートであり、コンテキストはビューで使用されるオブジェクトです.
まずテンプレートの基本ラベルを見てみましょう.どちらもコンテンツを出力できますが、後者はhtml符号化されています.jsRenderでは、データをレンダリングする方法はいくつかあります.
仮定テンプレートは次のとおりです.

<script type="text/tmp" id="tmp1">
    <p>my name is: {{:name}}</p>
    <p>i am: {{:info.age}} years old</p>
</script>

データは次のとおりです.

    var data = {
        name : "tom",
        info : {age : 19}
    }

　　1.コンパイル前のレンダリングはありません.テンプレートを直接指定します.例:
　　　　var html = $("#tmp1").render(data);      　　console.log(html);
　　2.コンパイル後にレンダリングします.テンプレートまたは文字列を指定します.
2.1テンプレートを指定します.効果は同じです.例:
　　　　　　var template = $.templates("#tmp1");　　　　　　var html = template.render(data);　　　　　　console.log(html);
2.2テンプレート名の指定
2.2.1伝達文字列
　　　　　　　　var template = $.templates("tmp1","{{:name}}");　　　　      　　var html = $.render.tmp1(data);    　　　　  　　console.log(html);
2.2.2複数のテンプレート名を渡す
　　　　　　　　var template = $.templates({　　　　    　　　　"tmp1":$("#tmp1").html(),    　　　　　　　　"tmp2":$("#tmp2").html()　　   　　  　　});　　    　　　　var html = $.render.tmp1(data);    　　    　　　　console.log(html);
二、論理判断と循環
　　2.1 if-else
文法:{{if condition}}...{else condition} ... {{else}}... {{/if}}
ここでif-else-elseではなくif-else-elseであることに注意してください.例:

<script type="text/tmp" id="tmp4">
    <p>my name is: {{:name}}</p>
    <p>  ：
    {{if info.age >= 18}}
           
    {{else}}
           
    {{/if}}
    </p>
</script>
var html = $("#tmp4").render(data);
$("#list").html(html);

　　2.2 for
文法:{{for}}...{{/for}}
2.2.1簡単for.例:

    <script type="text/tmp" id="tmp5">
        {{for}}
            <li>id:{{:ID}} name:{{:Name}}</li>
        {{/for}}    
    </script>
    var arr = [
        { ID: 1, Name: "tom" },
        { ID: 2, Name: "jack" },
        { ID: 3, Name: "lucy"}
    ];    
    var html = $("#tmp5").render(arr);
    $("#list").html(html);    

2.2.2ネストfor.
文法:{{for}}...{for現在のコンテキスト}...{{/for}} ... {{/for}}
ネストされたforは、遍歴するプロパティの名前を指定できます.#getIndex()と#dataは以下に説明します.例:

<script type="text/tmp" id="tmp7">    
    {{for}}
        <li>
            name:{{:name}}
            <ul>
                {{for hobbies}}
                    <li>{{:#getIndex() + 1}}:{{:#data}}</li>
                {{/for}}
            </ul>
        </li>
    {{/for}}    
</script>
arr = [
     { name: "tom", hobbies: ["  ", "  "] },
     { name: "jack", hobbies: ["  ", "   "] },
     { name: "lucy", hobbies: ["  ", "   "] }
];
var html = $("#tmp7").render(arr);
$("#list").html(html);

2.2.3分離for.
構文:{{forコンテキストtmpl="テンプレートid"/}}
forの論理が複雑であれば、ネストされたforは私たちのテンプレートを複雑にし、メンテナンスの難易度を高めます.forを分離することができます.上記の例では、forを新しいテンプレートに配置し、tmplプロパティで指定できます.例:

<script type="text/tmp" id="tmp8">    
    {{for}}
        <li>
            name:{{:name}}
            <ul>
                {{for hobbies tmpl="#tmp9" /}}
            </ul>
        </li>
    {{/for}}    
</script>
<script type="text/tmp" id="tmp9">    
    <li>{{:#getIndex() + 1}}:{{:#data}}</li>    
</script>
var html = $("#tmp8").render(arr);
$("#list").html(html);

三、#data、#index、#parent
最初に、定義したテンプレートはビューであり、使用するオブジェクトはコンテキストです.
#dataの現在のコンテキストは、例えば最も簡単な配列を返す[1,2,3,4]場合に便利であるが、この場合{:属性}}の形では得られず、{{#data}}でよい.また、上記のhobbiesのようなコンテキストを指定することができ、埋め込まれたforのコンテキスト#dataはhobbiesであり、外部の#dataはarr全体である.
#indexは現在下付きです.getIndex()で取得すべきです.
#parent現在のコンテキストが存在するビュー.parentプロパティは常にビューを検索できます.ビューのdataプロパティは現在のコンテキストです.たとえば、埋め込まれたforで外部のname属性を取得する場合は、#parent.parent.data.name取得.
四、拡張応用
上の基本的な使い方はすでに大部分の需要を満たすことができます.以下のいくつかの拡張は、ビューと論理を分離するために行われています.考えてみてください.もし私たちのビューに大量の論理判断や計算が必要で、すべて一緒に書くと、非常に面倒でメンテナンスが難しくなります.ビューは簡単なラベルで、論理はjsに書かれているほうがいいです.jsRendererはビュー上で拡張されます.
4.1カスタムタグTag
ラベルの論理をカスタムラベルに移動できます.
構文:1.ビュー{{"ラベル名"ラベルパラメータ付加パラメータ}}2.論理$.views.tags({"ラベル名":function(パラメータ){this.tagCtx.props.prefix付加パラメータ})
例:

    <script type="text/tmp" id="tmp10">
        {{for}}
            <li>
                name:{{:name}}                            
                hobbies: {{format hobbies prefix="@" /}}
            </li>
        {{/for}}         
    </script>
    $.views.tags({
        "format":function(hobbies){
            if(!hobbies || hobbies.length <= 0){
                return " ";
            }
            var result = "";
            for(var i = 0,length = hobbies.length;i < length; i++){
                result += "," + this.tagCtx.props.prefix + hobbies[i];
            }
            result = result.substring(1);
            return result;
        }
    })
    var html = $("#tmp10").render(arr);
    $("#list").html(html);

4.2変換器converter
変換器は、出力結果、例えば、大文字と小文字の変換などを処理することができる.
構文:1.ビュー{{"変換器名":パラメータ}}2.js $.views.converters({"コンバータ名":function(パラメータ){...}))

    <script type="text/tmp" id="tmp11">    
        {{for}}
            <li>
                Upper Name: {{toUpper:#parent.data.name}}
            </li>
        {{/for}}   
    </script>
    $.views.converters({
        "toUpper":function(name){
            if(name){
                return name.toUpperCase();
            }
        }
    })
    var html = $("#tmp11").render(arr);
    $("#list").html(html)

4.3補助関数Helper
拡張関数は結果の処理,論理判断などを行うことができる.
構文1.ビュー{~補助関数名(パラメータ)}}2.js $.views.helpers({"補助関数名":function(パラメータ){}})

    <script type="text/tmp" id="tmp12">    
        {{for}}
            <li>
                name: {{:name}}
                hobbies: {{:~concat(hobbies)}}
            </li>
        {{/for}}   
    </script>
    $.views.helpers({
        "concat":function(hobbies){            
            if(!hobbies || hobbies.length <= 0){
                return "";
            }
            var result = "";
            for(var i = 0,length = hobbies.length;i < length;i++){
                result += "&&" + hobbies[i];
            }
            return result.substring(2);
        }
    })
    var html = $("#tmp12").render(arr);
    $("#list").html(html);

五、まとめ
jsRendererは比較的新しいので、使いやすいです.しかし、私たちのデータとページの間には一方向のプロセスがあり、使い捨ての一方向であることがわかります.つまり、私たちのデータが変更されると、ビューが自動的に更新されず、インタフェースのデータが変更されると、実際のデータも自動的に変更されません.データとビューが双方向で、そのうちの1つが変更され、自動的に別のものが更新されると仮定すると、データを操作するだけで、domを操作する必要はありません.これがmvvmのメカニズムで、フロントエンドのmvvmフレームワークにはknockout、angularなどがたくさんあります.次はknockoutについてご紹介します.