Enjin templat JavaScript Panduan penggunaan JsRender berdasarkan jQuery

Rumah

hujung hadapan web

tutorial js

Enjin templat JavaScript Panduan penggunaan JsRender berdasarkan jQuery_jquery

May 16, 2016 pm 04:23 PM

javascript

Kata Pengantar

JsRender ialah enjin templat JavaScript berdasarkan jQuery Ia mempunyai ciri-ciri berikut:

· Mudah dan intuitif

· Fungsi berkuasa

· Boleh dilanjutkan

· Sepantas kilat

Ciri ini kelihatan sangat berkuasa, tetapi hampir setiap enjin templat akan mempromosikannya seperti ini. . .

Disebabkan keperluan kerja, Xiaocai bersentuhan dengan enjin templat ini. Selepas menggunakannya untuk seketika, saya mendapati bahawa ia sememangnya agak berkuasa, tetapi Xiaocai merasakan bahawa beberapa bahagian terlalu berkuasa, yang menjadikannya sukar untuk difahami.

Sebaliknya, dokumentasi rasmi JsRender agak terperinci, tetapi terdapat sedikit maklumat lain yang mengejutkan Jika anda menghadapi sebarang masalah, anda bukan sahaja tidak dapat mencari isu yang berkaitan hampir tiada hasil.

Selain itu, beberapa bahagian JsRender benar-benar sukar untuk difahami, jadi Xiaocai perlu segera berkongsi beberapa "amalan terbaik".

Berdasarkan penggunaan terkini, Xiaocai telah meringkaskan beberapa pengalaman praktikal Sudah tentu, pengalaman ini tidak boleh didapati dalam dokumen rasmi.

Nota: Artikel ini bukan tutorial pengenalan asas. Contoh berikut mempunyai penjelasan tersendiri. Pembaca tidak boleh mengalaminya sendiri.

Gelung bersarang menggunakan #induk untuk mengakses data induk (tidak disyorkan)

Salin kod Kod adalah seperti berikut:

 <!DOCTYPE html>

 <html>

   <kepala>

     <meta charset="utf-8">

     <title>嵌套循环使用#parent访问父级数据 --- oleh 杨元</title>

     <gaya>

     </style>

   </head>

   <badan>

     <div>

       <meja>

         <kepala>

           <tr>

             <th width="10%">序号</th>

             <th width="10%">姓名</th>

             <th width="80%">家庭成员</th>

           </tr>

         </kepala>

         <tbody id="list">

         </tbody>

       </table>

     </div>

     <script src="jquery.min.js"></script>

     <script src="jsviews.js"></script>

     <!-- 定义JsRender模版 -->

     <script id="testTmpl" type="text/x-jsrender">

       <tr>

         <td>{{:#index 1}}</td>

         <td>{{:name}}</td>

         <td>

           {{untuk keluarga}}

             {{!-- 利用#parent访问父级index --}}

             <b>{{:#parent.parent.index 1}}.{{:#index 1}}</b>

             {{!-- 利用#parent访问父级数据，父级数据保存在data属性中 --}}

             {{!-- #data相当于ini --}}

             {{:#parent.parent.data.name}}的{{:#data}}

           {{/untuk}}

         </td>

       </tr>

     </skrip>

     <skrip>

       //数据源

       var dataSrouce = [{

         nama: "张三",

         keluarga: [

           "爸爸",

           "妈妈",

           "哥哥"

         ]

       },{

         nama: "李四",

         keluarga: [

           "爷爷",

           "奶奶",

           "叔叔"

         ]

       }];

       //渲染数据

       var html = $("#testTmpl").render(dataSrouce);

       $("#list").append(html);

     </skrip>

   </body>

 </html>

Gelung bersarang menggunakan parameter untuk mengakses data induk (disyorkan)

Salin kod Kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<kepala>
<meta charset="utf-8">
<title>Gelung bersarang menggunakan parameter untuk mengakses data induk --- oleh Yang Yuan</title>
<gaya>
</style>
</head>
<badan>
<div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               </tr>
                                                                                                           <tbody id="list">
                                                                                                        </table>
</div>
<script src="jquery.min.js"></script>
<script src="jsviews.js"></script>

<script id="testTmpl" type="text/x-jsrender">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           {{!-- Apabila menggunakan gelung for, anda boleh menambah parameter pada penghujung Parameter mesti bermula dengan ~ dan berbilang parameter dipisahkan oleh ruang --}}
Kami cache data ibu bapa, dan dengan mengakses parameter di sub-gelung, kami secara tidak langsung dapat mengakses data induk-}}
{{untuk keluarga ~parentIndex=#index ~parentName=name}}
                                                                                                                                                                                                                                                                                                                            {{!-- #data bersamaan dengan ini --}}
{{:~parentName}}'s {{:#data}}
                                        {{/untuk}}
                                                                                                        </tr>
</skrip>
<skrip>
//Sumber data
var dataSrouce = [{
           nama: "张三",
          keluarga: [
"Ayah",
"Ibu",
"Abang"
]
},{
           nama: "李思",
          keluarga: [
"Atuk",
"Nenek",
"Pakcik"
]
}];
//Memaparkan data
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);
</skrip>
</body>
</html>

Gunakan lain dalam teg tersuai (sangat tidak disyorkan)

Salin kod Kod adalah seperti berikut:

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>自定义标签中使用else --- by 杨元</title>

     <style>

     </style>

   </head>

   <body>

     <div>

       <table>

         <thead>

           <tr>

             <th width="50%">名称</th>

             <th width="50%">单价</th>

           </tr>

         </thead>

         <tbody id="list">

         </tbody>

       </table>

     </div>

<script src="jquery.min.js"></script>

<script src="jsviews.js"></script>

<!-- Tentukan templat JsRender -->

<script id="testTmpl" type="text/x-jsrender">

                        {{!-- isShow ialah label tersuai, harga ialah parameter masuk, status ialah atribut tambahan --}}

                  {{isShow status harga=0}}

                  {{:harga}}

                  {{status harga lain=1}}

​​​​​—

                 {{/isShow}}

         </tr>

</skrip>

<skrip>

//Sumber data

var dataSrouce = [{

          nama: "Epal",

Harga: 108

},{

          nama: "Yali",

Harga: 370

},{

           nama: "pic",

Harga: 99

},{

          nama: "nanas",

Harga: 371

},{

          nama: "Oren",

harga: 153

}];

//Teg tersuai

$.views.tags({

"isShow": fungsi(harga){

            var temp=price ''.split('');

Jika(this.tagCtx.props.status === 0){

                        // Tentukan sama ada harga ialah bilangan bunga bakung, jika ya, paparkannya, jika tidak jangan paparkan 

if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){

                 kembalikan this.tagCtxs[0].render();

                }lain{

                  kembalikan this.tagCtxs[1].render();

            }

               }lain{

              kembalikan "";

           }

         }

});

//Memaparkan data

      var html = $("#testTmpl").render(dataSrouce);

$("#list").append(html);

</skrip>

</body>

</html>

Gunakan pembantu dan bukannya teg tersuai (disyorkan)

Salin kod

Kod adalah seperti berikut:

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>用helper代替自定义标签 --- by 杨元</title>

     <style>

     </style>

   </head>

   <body>

     <div>

       <table>

         <thead>

           <tr>

             <th width="50%">名称</th>

             <th width="50%">单价</th>

           </tr>

         </thead>

         <tbody id="list">

         </tbody>

       </table>

     </div>

<script src="jquery.min.js"></script>

<script src="jsviews.js"></script>

<!-- Tentukan templat JsRender -->

<script id="testTmpl" type="text/x-jsrender">

;
                {{jika ~isShow(harga)}}

                  {{:harga}}

                 {{else}}

​​​​​—

                                        {{/jika}}

         </tr>

</skrip>

<skrip>

//Sumber data

var dataSrouce = [{

          nama: "Epal",

Harga: 108

},{

          nama: "Yali",

Harga: 370

},{

           nama: "pic",

Harga: 99

},{

          nama: "nanas",

Harga: 371

},{

          nama: "Oren",

harga: 153

}];

//Pembantu

         $.views.helpers({

"isShow": fungsi(harga){

            var temp=price ''.split('');

if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10 ),3))){

              kembali benar;

               }lain{

               pulangan palsu;

           }

         }

});

//Memaparkan data

      var html = $("#testTmpl").render(dataSrouce);

$("#list").append(html);

</skrip>

</body>

</html>

Muat turun pakej kod demo: 
http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn