Учебники

KnockoutJS — шаблоны

Октябрь 2, 2018

Шаблон — это набор элементов DOM, которые можно использовать повторно. Шаблонирование позволяет легко создавать сложные приложения благодаря свойству минимизации дублирования элементов DOM.

Есть 2 способа создания шаблонов.

  • Собственные шаблоны — этот метод поддерживает привязки потока управления, такие как foreach, with и if. Эти привязки фиксируют HTML-разметку, существующую в элементе, и используют ее в качестве шаблона для случайных элементов. Никакая внешняя библиотека не требуется для этого шаблона.

  • Шаблонирование на основе строк — KO подключается к стороннему движку для передачи значений ViewModel в него и вставляет полученную разметку в документ. Например, JQuery.tmpl и Underscore Engine.

Собственные шаблоны — этот метод поддерживает привязки потока управления, такие как foreach, with и if. Эти привязки фиксируют HTML-разметку, существующую в элементе, и используют ее в качестве шаблона для случайных элементов. Никакая внешняя библиотека не требуется для этого шаблона.

Шаблонирование на основе строк — KO подключается к стороннему движку для передачи значений ViewModel в него и вставляет полученную разметку в документ. Например, JQuery.tmpl и Underscore Engine.

Синтаксис 

template: <parameter-value>

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

Обратите внимание, что тип предоставляется в виде text / html в блоке сценария, чтобы уведомить KO о том, что это не исполняемый блок, а просто блок шаблона, который необходимо отобразить.

параметры

Комбинация следующих свойств может быть отправлена ​​в качестве значения параметра в шаблон.

  • name — представляет имя шаблона.

  • узлы — это представляет массив узлов DOM, которые будут использоваться в качестве шаблона. Этот параметр игнорируется, если передан параметр name.

  • Данные — это не что иное, как данные, которые будут показаны через шаблон.

  • if — Шаблон будет обслуживаться, если данное условие приводит к значению true или true-like.

  • foreach — Служить шаблону в формате foreach.

  • as — это просто для создания псевдонима в элементе foreach.

  • afterAdd, afterRender, beforeRemove — Это все для представления вызываемых функций, которые должны быть выполнены в зависимости от выполняемой операции.

name — представляет имя шаблона.

узлы — это представляет массив узлов DOM, которые будут использоваться в качестве шаблона. Этот параметр игнорируется, если передан параметр name.

Данные — это не что иное, как данные, которые будут показаны через шаблон.

if — Шаблон будет обслуживаться, если данное условие приводит к значению true или true-like.

foreach — Служить шаблону в формате foreach.

as — это просто для создания псевдонима в элементе foreach.

afterAdd, afterRender, beforeRemove — Это все для представления вызываемых функций, которые должны быть выполнены в зависимости от выполняемой операции.

наблюдения

Визуализация именованного шаблона

Шаблоны неявно определяются HTML-разметкой внутри DOM при использовании с привязками потока управления. Однако, если вы хотите, вы можете выделить шаблоны в отдельный элемент, а затем ссылаться на них по имени.

пример

Live Demo 

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

  • Сохраните приведенный выше код в файле template-named.htm .

  • Откройте этот файл HTML в браузере.

  • Здесь Friend-template используется 2 раза.

Сохраните приведенный выше код в файле template-named.htm .

Откройте этот файл HTML в браузере.

Здесь Friend-template используется 2 раза.

Использование «foreach» в шаблоне

Ниже приведен пример использования параметра foreach вместе с именем шаблона.

пример

Live Demo 

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

  • Сохраните приведенный выше код в файле template-foreach.htm .

  • Откройте этот файл HTML в браузере.

  • Здесь в привязке шаблона используется foreach control.

Сохраните приведенный выше код в файле template-foreach.htm .

Откройте этот файл HTML в браузере.

Здесь в привязке шаблона используется foreach control.

Создание псевдонима Использование в качестве ключевого слова для элементов foreach

Ниже описано, как можно создать псевдоним для элемента foreach. 

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

С помощью псевдонима становится легко обращаться к родительским объектам из циклов foreach. Эта функция полезна, когда код сложен и вложен на нескольких уровнях.

пример

Live Demo 

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

  • Сохраните приведенный выше код в файле template-as-alias.htm .

  • Откройте этот файл HTML в браузере.

  • Псевдоним используется вместо полного имени массивов.

Сохраните приведенный выше код в файле template-as-alias.htm .

Откройте этот файл HTML в браузере.

Псевдоним используется вместо полного имени массивов.

Использование afterAdd, beforeRemove и afterRender

Существуют ситуации, когда дополнительная пользовательская логика должна быть запущена для элементов DOM, созданных шаблоном. В таком случае могут использоваться следующие обратные вызовы. Учтите, что вы используете элемент foreach тогда —

afterAdd — эта функция вызывается при добавлении нового элемента в массив, упомянутый в foreach.

beforeRemove — эта функция вызывается непосредственно перед удалением элемента из массива, указанного в foreach.

afterRender — Функция, упомянутая здесь, вызывается каждый раз, когда передается foreach и новые записи добавляются в массив.

пример

Live Demo 

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

  • Сохраните приведенный выше код в файле template-afterrender.htm .

  • Откройте этот файл HTML в браузере.

  • Здесь функция afterProcess выполняется каждый раз, когда передается foreach.

Сохраните приведенный выше код в файле template-afterrender.htm .

Откройте этот файл HTML в браузере.

Здесь функция afterProcess выполняется каждый раз, когда передается foreach.

Выбор шаблона динамически

Если доступно несколько шаблонов, один из них можно выбрать динамически, указав имя в качестве наблюдаемого параметра. Следовательно, значение шаблона будет переоцениваться при изменении параметра имени, а данные, в свою очередь, будут перерисовываться.

пример

Live Demo 

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

  • Сохраните приведенный выше код в файле template-dynamic.htm .

  • Откройте этот файл HTML в браузере.

  • Используемый шаблон определяется в зависимости от значения активного флага.

Сохраните приведенный выше код в файле template-dynamic.htm .

Откройте этот файл HTML в браузере.

Используемый шаблон определяется в зависимости от значения активного флага.

Использование внешних строковых движков

Собственные шаблоны отлично работают с различными элементами потока управления, даже с вложенными блоками кода. KO также предлагает способ интеграции с внешней библиотекой шаблонов, такой как Underscore templating Engine или JQuery.tmpl.

Как упоминалось на официальном сайте, JQuery.tmpl больше не находится в активной разработке с декабря 2011 года. Следовательно, родные шаблоны KO рекомендуется использовать только вместо JQuery.tmpl или любого другого механизма шаблонов на основе строк.

Пожалуйста, обратитесь к официальному сайту для более подробной информации об этом.

44
Share: