Дайвинг в CanJS: Часть 3

31 января 2017

Это заключительная часть учебника из трех частей, в котором рассказывается, как создать приложение менеджера контактов в JavaScript, используя CanJS и jQuery. Когда вы закончите с этим учебником, у вас будет все, что вам нужно, чтобы создать свои собственные приложения JavaScript с помощью CanJS!

Во второй части вы создали представления и элементы управления, необходимые для отображения категорий, созданных помощников Model.List, использовали маршрутизацию для фильтрации контактов и изменения вашего EJS, чтобы воспользоваться привязкой в ​​реальном времени.

В этой части учебника вы будете:

Редактировать и удалять контакты с помощью элемента управления контактом. Создать элемент управления и просмотр для создания контактов. Слушайте события DOM и Model с помощью шаблонных обработчиков событий Control.

. Вы добавите к исходные файлы из первой и второй частей, поэтому, если вы еще этого не сделали, догоните, прочитав часть 1 и 2.


Обновление контакта

В первой части contactView.ejs помещает каждое свойство контакта во входной тег. Чтобы обновить контакт, когда эти входы меняются, вам необходимо добавить некоторые обработчики событий в Contact Control. Добавьте этот код contacts.js внутри элемента управления «Контакты»:

'.contact input focusout': function(el, ev) {
  this.updateContact(el);
},
'.contact input keyup': function(el, ev) {
  if(ev.keyCode == 13){
    el.trigger('blur')
  }
},
'.contact select change': function(el, ev) {
  this.updateContact(el)
},
updateContact: function(el){
  var contact = el.closest('.contact').data('contact');
  contact.attr(el.attr('name'), el.val()).save();
}

Давайте рассмотрим этот код по очереди и посмотрим, как он работает:

'.contact input focusout': function(el, ev) {
  this.updateContact(el);
},

Вызывает updateContact (), когда любойтеряет фокус.

'.contact input keyup': function(el, ev) {
  if(ev.keyCode == 13){
    el.trigger('blur')
  }
}

Запускает событие размытия на, если клавиша ввода нажата во время фокусировки. Это приведет к потере фокуса ввода, который обрабатывается обработчиком события фокуса.

'.contact select change': function(el, ev) {
  this.updateContact(el)
},

Вызывает updateContact (), когда изменяется значение

var contact = el.closest('.contact').data('contact');

Находит ближайший

  • родительский тег и извлекает экземпляр модели с помощью $.data ().
  • contact.attr(el.attr('name'), el.val()).save();

    Обновляет контакт с помощью attr (). Имя каждогосоответствует свойству контакта, поэтому el.attr ('name') вернет имя обновляемого свойства. save () используется для сохранения изменений в контактной модели.


    Удаление контакта

    В правом верхнем углу каждого контакта есть небольшая ссылка с «X». Когда это нажатие, контакт должен быть удален. Чтобы сделать это, добавьте еще один обработчик событий в элемент управления «Контакты», который выглядит следующим образом:

    '.remove click': function(el, ev){
      el.closest('.contact').data('contact').destroy();
    }

    Когда щелкнут X, экземпляр контакта извлекается из ближайшего

  • и вызывается destroy (). destroy () удаляет контакт из модели и удаляет его из любого списка Model.Lists.
  • Прямая привязка автоматически обновит ваш пользовательский интерфейс при удалении контакта.

    Создание контакта

    Теперь вы создадите элемент управления и просмотр, необходимый для создания контакта. Сначала вам понадобится гигантская кнопка «Новый контакт». Добавьте этот код в index.html прямо над

    :

    <a class="btn btn-large btn-primary" href="javascript://" id="new-contact">
      <i class="icon-plus icon-white"></i> New Contact
    </a>

    Вам также потребуется создать новый вид, который отобразит форму для создания контакта. Сохраните этот код как createView.ejs в папке вида:

    <div class="hero-unit contact span8">   
      <%== can.view.render('views/contactView.ejs', {
        contact: contact, categories: categories
      }) %>   
      <div class="row">    
        <div class="buttons pull-right">       
          <a href="javascript://" class="btn btn-primary save">Save</a>      
          <a href="javascript://" class="btn cancel">Cancel</a>    
        </div>   
      </div> 
    </div>

    Этот вид отображает подшаблон contactView.ejs и добавляет кнопки «Сохранить» и «Отмена». Вот как это выглядит в приложении:

    Теперь вам нужно создать новый элемент управления с именем Create, который отобразит форму и сохранит новый контакт в контактной модели. Добавьте этот код в contacts.js:

    Create = can.Control({
      show: function(){
        this.contact = new Contact();
        this.element.html(can.view('views/createView.ejs', {
          contact: this.contact,
          categories: this.options.categories
        }));
        this.element.slideDown(200);
      },
      hide: function(){
        this.element.slideUp(200);
      },
      '.contact input keyup': function(el, ev) {
        if(ev.keyCode == 13){
          this.createContact(el);
        }
      },
      '.save click' : function(el){
        this.createContact(el)
      },
      '.cancel click' : function(){
        this.hide();
      },
      createContact: function() {
        var form = this.element.find('form');
          values = can.deparam(form.serialize());
        if(values.name !== "") {
          this.contact.attr(values).save();
          this.hide();
        }
      }
    });

    Давайте подробно рассмотрим этот элемент управления, чтобы узнать, что происходит:

    show: function(){
      this.contact = new Contact();
      this.element.html(can.view('views/createView.ejs', {
        contact: this.contact,
        categories: this.options.categories
      }));
      this.element.slideDown(200);
    },

    Создает пустой контакт, используя новый контакт ({}) и присваивает ему this.contact. Новый контакт передается в can.view () вместе с категориями, которые будут отображаться.

    hide: function(){
      this.element.slideUp(200);
    },

    Выводит форму из поля зрения.

    '.contact input keyup': function(el, ev) {
      if(ev.keyCode == 13){
        this.createContact(el);
      }
    }

    Вызывает createContact (), если клавиша ввода нажата, находясь на одном из входов.

    '.save click' : function(el){
      this.createContact(el)
    },

    Вызовите createContact (), когда нажата кнопка «Сохранить».

    '.cancel click' : function(){
      this.hide();
    },

    Вызывает hide (), когда нажата кнопка «Отмена».

    var form = this.element.find('form'); 
      values = can.deparam(form.serialize());

    Находит элемент

    и использует функцию serialize () jQuery для получения строки, представляющей все значения формы. Затем сериализованная строка преобразуется в объект, используя can.deparam ().

    if(values.name !== "") {
      this.contact.attr(values).save();
      this.hide();
    }

    Если имя контакта не пустое, attr () используется для обновления контакта, сохраненного в this.contact. save () вызывается для сохранения изменений в модели, а форма скрыта вызовом hide ().


    Использование шаблонных обработчиков событий

    Элементы управления также поддерживают шаблонные обработчики событий, которые позволяют настраивать обработчик событий и прослушивать события на объектах, отличных от this.element.

    Вы настраиваете поведение обработчика с помощью {NAME} в обработчике событий. Переменная внутри фигурных скобок просматривается сначала на элементах управления, а затем на окне. Вы можете создавать несколько экземпляров одного и того же элемента управления, но настраивать поведение обработчиков событий в каждом экземпляре.

    Элементы управления также могут связываться с объектами, отличными от this.element, с помощью шаблонных обработчиков событий. Если переменная внутри {NAME} является объектом, Control будет привязываться к этому объекту для прослушивания событий. Объект не должен быть элементом DOM, он может быть любым объектом, подобным модели. Чтобы прослушать клик в любом месте страницы, вы должны использовать: '{document} click'. как ваш обработчик событий.

    Эти обработчики будут очищены, когда экземпляр Control будет уничтожен. Это важно для предотвращения утечек памяти, которые являются общими для приложений JavaScript.

    Отображение формы

    Вам нужно будет использовать шаблонный обработчик событий, чтобы отобразить форму при нажатии кнопки «Новый контакт». Добавьте этот обработчик событий в Create Control в contacts.js:

    '{document} #new-contact click': function(){
      this.show();
    }

    Кнопка «Новый контакт» находится за пределами элемента «Создать элемент управления», поэтому «{document} # new-contact» используется как селектор кнопки. Когда он будет нажат, форма сдвинется вниз.


    Инициализация элемента управления Create

    Как и другие элементы управления в вашем приложении, вам нужно создать новый экземпляр Create Control. Обновите функцию готовности документа в contacts.js, чтобы выглядеть так:

    $(document).ready(function(){
      $.when(Category.findAll(), Contact.findAll()).then(function(categoryResponse, contactResponse){
        var categories = categoryResponse[0],
          contacts = contactResponse[0];
        new Create('#create', {
          categories: categories
        });
        new Contacts('#contacts', {
          contacts: contacts,
          categories: categories
        });
        new Filter('#filter', {
          contacts: contacts,
          categories: categories
        });
      });
    })

    С этим изменением экземпляр Create Control будет создан в элементе #create. Он будет передан список категорий.


    Реагирование на новый контакт

    Когда создается новый контакт, необходимо обновить Model.List, хранящийся в контроле контактов. Вы делаете это с помощью шаблонных обработчиков событий. Добавьте этот обработчик событий в Управление контактами в contacts.js:

    '{Contact} created' : function(list, ev, contact){
      this.options.contacts.push(contact);
    }

    Это связано с созданным событием Контактной модели. Новый контакт добавляется в Model.List, который хранится в контроле контактов, используя push ().

    Прямая привязка автоматически обновит пользовательский интерфейс приложений, когда контакт будет добавлен в this.options.contacts.

    Wrapping Up

    Это все для последней части этого учебника. В третьей части вы:

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

    . Это конец в руководстве менеджера контактов CanJS. Ниже приведен краткий обзор того, что было рассмотрено в этом трехтомном учебнике:

    Создание элементов управления для управления логикой приложения. Отображение частей приложения с помощью представлений. Представление слоя данных приложения с помощью моделей. Моделирование службы REST с помощью приборов. Использование привязки в реальном времени для сохранения пользовательского интерфейса приложения в синхронизация со слоем данных Прослушивание событий с обработчиками событий Control Работа со списками экземпляров модели с помощью Model.List

    Теперь у вас есть все необходимое для создания приложений JavaScript с помощью CanJS. Пойдите, постройте что-нибудь удивительное.

    Для получения полной документации и более примеров приложений посетите CanJS. Спасибо за прочтение!