Как создать список задач GitHub в режиме реального времени с помощью CanJS

• ($submit) — это прослушиватель событий DOM, который будет вызывать функцию send() в нашей модели представления при send() формы
• {($value)}="title" и {($value)}="body" являются двусторонними значениями : при изменении value input модель представления будет обновляться, и наоборот

Во-вторых, давайте обновим GitHubIssuesVM в app.js чтобы иметь три новых свойства:

 var GitHubIssuesVM = can.DefineMap.extend('GitHubIssuesVM', { issuesPromise: { value: function() { return Issue.getList({ sort: 'sort_position' }); } }, issues: { get: function(lastValue, setValue) { if (lastValue) { return lastValue; } this.issuesPromise.then(setValue); } }, pageTitle: 'string', title: 'string', body: 'string', send: function() { var firstIssue = (this.issues) ? this.issues[0] : null; var sortPosition = (firstIssue) ? (Number.MIN_SAFE_INTEGER + firstIssue.sort_position) / 2 : 0; new Issue({ title: this.title, body: this.body, sort_position: sortPosition }).save().then(function() { this.title = this.body = ''; }.bind(this)); } }); 

Помимо свойств body и title для новой проблемы, мы добавили метод send() который создает новую проблему. Он принимает список issues чтобы он мог вычислить sort_position для новой проблемы: мы хотим, чтобы он был до первой проблемы. Как только у нас есть все значения для новой проблемы, мы вызываем new Issue() чтобы создать ее, .save() чтобы отправить ее на наш сервер, а затем ждем разрешения Promise; если это удастся, мы сбрасываем title и body чтобы очистить форму!

Наконец, давайте обновим компонент github-issues app.js в app.js чтобы иметь новый объект events :

 can.Component.extend({ tag: 'github-issues', view: can.stache.from('github-issues-template'), ViewModel: GitHubIssuesVM, events: { '{element} form submit': function(element, event) { event.preventDefault(); } } }); 

Свойство events can-component используется для прослушивания события отправки формы, которое должно быть запущено. Мы не хотим, чтобы страница перезагружалась, когда пользователь отправляет форму, поэтому мы вызываем protectDefault (), чтобы отменить поведение отправки формы по умолчанию.

Теперь мы можем добавить проблему и увидеть ее в пользовательском интерфейсе GitHub! Более того, проблема появляется в нижней части нашего списка проблем, что довольно фантастично благодаря алгебре множеств!

Добавление обновления в реальном времени

Наше приложение может отправлять новые проблемы в GitHub, но изменения из GitHub не обновляют наше приложение. Давайте добавим обновление в реальном времени с Socket.IO !

В app.js давайте добавим следующий код после того, как мы установили Issue.connection :

 var socket = io(); socket.on('issue created', function(issue) { Issue.connection.createInstance(issue); }); socket.on('issue removed', function(issue) { Issue.connection.destroyInstance(issue); }); socket.on('issue updated', function(issue) { Issue.connection.updateInstance(issue); }); 

Наш локальный сервер генерирует три разных события, когда проблемы создаются, удаляются или обновляются. Затем наши прослушиватели событий вызывают createInstance , destroyInstance или updateInstance, чтобы изменить модель данных Issue . Поскольку каждый экземпляр Issue является наблюдаемым и Issue.List является наблюдаемым, CanJS автоматически обновит любые части нашего приложения, которые ссылаются на что-либо в модели Issue !

Когда мы перезагрузим страницу и внесем изменения через пользовательский интерфейс GitHub, мы увидим те же самые изменения в нашем пользовательском интерфейсе!

Изменение порядка вопросов

Теперь давайте добавим некоторые функциональные возможности перетаскивания для нас, чтобы организовать наши проблемы! Наш локальный сервер настроен так, чтобы каждый раз при изменении порядка в списке проблем issues.json файл issues.json каталоге нашего проекта, поэтому все, что нам нужно сделать, — это обновить наше приложение, чтобы иметь некоторые элементы управления для переупорядочения проблем и некоторую логику для назначения им новых sort_position .

После кода Socket.IO, который мы добавили в разделе выше, давайте добавим следующее:

 can.view.callbacks.attr('sortable-issues', function(element) { $(element).sortable({ containment: 'parent', handle: '.grab-handle', revert: true, start: function(event, ui) { var draggedElement = ui.item; draggedElement.addClass('drag-background'); }, stop: function(event, ui) { var draggedElement = ui.item; draggedElement.removeClass('drag-background'); }, update: function(event, ui) { var draggedElement = ui.item[0]; var draggedIssue = can.data.get.call(draggedElement, 'issue'); var nextSibling = draggedElement.nextElementSibling; var previousSibling = draggedElement.previousElementSibling; var nextIssue = (nextSibling) ? can.data.get.call(nextSibling, 'issue') : {sort_position: Number.MAX_SAFE_INTEGER}; var previousIssue = (previousSibling) ? can.data.get.call(previousSibling, 'issue') : {sort_position: Number.MIN_SAFE_INTEGER}; draggedIssue.sort_position = (nextIssue.sort_position + previousIssue.sort_position) / 2; draggedIssue.save(); } }); }); 

Уф! Давайте разберемся с этим:

• can.view.callbacks предназначен для регистрации обратного вызова всякий раз, когда новый атрибут или элемент добавляется в DOM. В нашем коде наша функция будет вызываться всякий раз, когда к элементу добавляется атрибут sortable-issues .
• Мы используем сортируемое взаимодействие jQuery UI для перетаскивания элементов DOM. Мы настроили его с помощью параметров сдерживания , обработки и возврата .
• Всякий раз, когда пользователь начинает перетаскивать проблему, запускается функция запуска , которая добавляет класс в элемент DOM.
• Всякий раз, когда пользователь удаляет проблему, вызывается функция stop , которая удаляет класс, который мы добавили при start .
• Обновление будет вызвано после полной остановки сортировки и обновления DOM. Наша функция получает данные модели проблемы для проблемы, которая была перетащена, а также для проблем, которые возникают непосредственно до и после, поэтому она может пересчитать sort_position , sort_position между двумя проблемами. После того, как мы присваиваем свойство sort_position , мы вызываем save (), чтобы поместить обновленные данные о проблеме на наш локальный сервер.

Теперь давайте обновим <ol> проблем в index.html :

  <ol class="list-unstyled" sortable-issues> {{#each issues}} <li class="list-group-item" {{data('issue', this)}}> {{^is issues.length 1}} <span class="glyphicon glyphicon-move grab-handle pull-right text-muted" aria-hidden="true"></span> {{/is}} <h4 class="list-group-item-heading"> {{title}} <span class="text-muted">#{{number}}</span> </h4> <p class="list-group-item-text text-overflow"> {{body}} </p> </li> {{/each}} </ol> 

Мы добавили несколько новых вещей:

• Атрибут app.js вызовет обратный вызов, который мы определили в app.js , как только список окажется в DOM.
• {{data('issue', this)}} присоединит данные о проблеме к элементу DOM, чтобы мы могли получить их в нашем sortable-issues .
• Раздел {{^is issues.length 1}} добавит ручку захвата, чтобы переместить проблему, если в списке более одной проблемы.

Теперь, когда мы перезагрузим страницу, мы увидим ручку захвата по каждой проблеме, и мы можем подобрать их, чтобы изменить порядок проблем!

Дальнейшее чтение

Нам удалось создать список дел в реальном времени для проблем GitHub с CanJS! Если у меня возникнет желание узнать больше о CanJS, ознакомьтесь с некоторыми из руководств, приведенных ниже на CanJS.com :

• Чат в реальном времени
• TodoMVC
• Прогноз погоды

Спасибо, что нашли время, чтобы пройти этот урок. Если вам нужна помощь, пожалуйста, не бойтесь задавать вопросы о Gitter , на форумах CanJS , писать мне в Twitter или оставлять комментарии ниже!

Эта статья была рецензирована Камило Рейесом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!