KnockoutJS - Şablon oluşturma

Templatetekrar tekrar kullanılabilen bir DOM öğeleri kümesidir. Şablon oluşturma, DOM öğelerinin yinelenmesini en aza indirme özelliği nedeniyle karmaşık uygulamalar oluşturmayı kolaylaştırır.

Şablon oluşturmanın 2 yolu vardır.

Native templating- Bu yöntem foreach, with ve if gibi kontrol akışı bağlamalarını destekler. Bu bağlamalar, öğede var olan HTML biçimlendirmesini yakalar ve bunu rastgele öğeler için şablon olarak kullanır. Bu şablonlama için harici kitaplık gerekmez.
String-based templating- KO, ViewModel değerlerini ona iletmek için üçüncü taraf motoruna bağlanır ve ortaya çıkan işaretlemeyi belgeye enjekte eder. Örneğin, JQuery.tmpl ve Underscore Engine.

Syntax

template: <parameter-value>

<script type = "text/html" id = "template-name">
   ...
   ...   // DOM elemets to be processed
   ...
</script>

Bunu not et type olarak sağlanır text/html komut dosyası bloğunda, bunun yürütülebilir bir blok olmadığını, yalnızca oluşturulması gereken bir şablon bloğu olduğunu KO'ya bildirmek için.

Parameters

Aşağıdaki özelliklerin kombinasyonu, şablona parametre değeri olarak gönderilebilir.

name - Bu, şablonun adını temsil eder.
nodes- Bu, şablon olarak kullanılacak bir DOM düğümleri dizisini temsil eder. İsim parametresi geçilirse bu parametre göz ardı edilir.
data - Bu, şablon aracılığıyla gösterilecek verilerden başka bir şey değildir.
if - Belirtilen koşul doğru veya gerçek benzeri bir değerle sonuçlanırsa şablon sunulacaktır.
foreach - Şablonu foreach formatında sunmak için.
as - Bu sadece foreach öğesinde bir takma ad oluşturmak içindir.
afterAdd, afterRender, beforeRemove - Bunların tümü, gerçekleştirilen işleme bağlı olarak yürütülecek çağrılabilir işlevleri temsil etmek içindir.

Gözlemler

Adlandırılmış bir Şablon Oluşturma

Şablonlar, denetim akışı bağlamaları ile kullanıldığında DOM içinde HTML biçimlendirmesi tarafından örtük olarak tanımlanır. Bununla birlikte, isterseniz, şablonları ayrı bir öğeye ayırabilir ve ardından adlarına göre referans verebilirsiniz.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Named Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
      <div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friend1 = { 
               name: 'Smith', 
               contactNumber: 4556750345, 
               email: '[email protected]' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: '[email protected]' 
            };
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: template-named.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Burada arkadaş-şablon 2 kez kullanılır.

Şablonda "foreach" kullanma

Aşağıdaki kullanım örneği foreach şablon adı ile birlikte parametresi.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - foreach used with Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = [
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
               { name: 'Lisa', contactNumber: 4567893131, email: '[email protected]' }
            ]
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: template-foreach.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Burada foreach kontrolü şablon bağlamada kullanılır.

Foreach Öğeleri için Anahtar Kelime Olarak Kullanarak Takma Ad Oluşturma

Bir foreach öğesi için nasıl bir takma ad oluşturulabilir -

<div data-bind = "template: { 
   name: 'friend-template', 
   foreach: friends, 
   as: 'frnz' 
}"></div>

Takma ad oluşturarak foreach döngülerinin içinden ana nesnelere başvurmak kolay hale gelir. Bu özellik, kod karmaşık olduğunda ve birden çok düzeyde iç içe geçtiğinde kullanışlıdır.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - using alias in Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <ul data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends, 
         as: 'frnz' 
      }"></ul>

      <script type = "text/html" id = "friend-template">
         <li>
            <h3 data-bind = "text: name"></h3>
            <span>Contact Numbers</span>
            <ul data-bind = "template: { 
               name : 'contacts-template', 
               foreach:contactNumber, 
               as: 'cont'
            } "></ul>
            <p>Email-id: <span data-bind = "text: email"></span></p>
         </li>
      </script>

      <script type = "text/html" id = "contacts-template">
         <li>
            <p><span data-bind = "text: cont"></span></p>
         </li>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = ko.observableArray ( [
               { 
                  name: 'Smith', 
                  contactNumber: [ 4556750345, 4356787934 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Jack', 
                  contactNumber: [ 6789358001, 3456895445 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Lisa', 
                  contactNumber: [ 4567893131, 9876456783, 1349873445 ],  
                  email: '[email protected]' 
               }
            ]);
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: template-as-alias.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Dizilerin tam adı yerine takma ad kullanılır.

AfterAdd, beforeRemove ve afterRender kullanma

Şablon tarafından oluşturulan DOM öğelerinde ekstra özel mantığın çalıştırılması gereken durumlar vardır. Böyle bir durumda, aşağıdaki geri aramalar kullanılabilir. Foreach elementini kullandığınızı düşünün -

afterAdd - Bu işlev, foreach'de belirtilen diziye yeni bir öğe eklendiğinde çağrılır.

beforeRemove - Bu işlev, öğe foreach'de belirtilen diziden kaldırılmadan hemen önce çağrılır.

afterRender - Burada bahsedilen işlev her foreach oluşturulduğunda ve diziye yeni girişler eklendiğinde çağrılır.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Use of afterRender Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends , 
         afterRender: afterProcess
      }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
         <button data-bind = "click: $root.removeContact">remove </button>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            self = this;
            this.friends = ko.observableArray ([
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
            ])

            this.afterProcess = function(elements, data){
               $(elements).css({color: 'magenta' });
            }

            self.removeContact = function() {
               self.friends.remove(this);
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: template-afterrender.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Burada afterProcess işlevi her foreach işlendiğinde çalıştırılır.

Şablonu Dinamik Olarak Seçme

Birden fazla şablon mevcutsa, biri dinamik olarak seçilebilir. observableparametre. Bu nedenle, şablon değeri ad parametresi değiştikçe yeniden değerlendirilecek ve daha sonra veriler yeniden işlenecektir.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Dynamic Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: whichTemplate, 
         foreach: friends 
      }"></div>

      <script type = "text/html" id = "only-phon">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
      </script>

      <script type = "text/html" id = "only-email">
         <h3 data-bind = "text: name"></h3>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
   
            this.friends = ko.observableArray ([
               {
                  name: 'Smith', 
                  contactNumber: 4556750345, 
                  email: '[email protected]', 
                  active: ko.observable(true)
               },
               
               {
                  name: 'Jack', 
                  contactNumber: 6789358001, 
                  email: '[email protected]', 
                  active: ko.observable(false)
               },
            ]);

            this.whichTemplate = function(friends) {
               return friends.active() ? "only-phon" : "only-email";
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

Yukarıdaki kodun nasıl çalıştığını görmek için aşağıdaki adımları uygulayalım -

Yukarıdaki kodu şuraya kaydedin: template-dynamic.htm dosya.
Bu HTML dosyasını bir tarayıcıda açın.
Kullanılacak şablona aktif bayrak değerine göre karar verilir.

Harici dizi tabanlı motorları kullanma

Yerel şablon oluşturma, iç içe geçmiş kod bloklarında bile çeşitli kontrol akışı öğeleriyle mükemmel şekilde çalışır. KO ayrıca Underscore templating Engine veya JQuery.tmpl gibi harici şablon oluşturma kitaplığı ile entegre etmenin bir yolunu sunar.

Resmi sitede belirtildiği gibi JQuery.tmpl, Aralık 2011'den bu yana artık aktif olarak geliştirilmiyor. Bu nedenle, KO'nun yerel şablonlaması yalnızca JQuery.tmpl veya herhangi bir dizge tabanlı şablon motoru yerine önerilir.

Bununla ilgili daha fazla ayrıntı için lütfen resmi siteye bakın .