So erstellen Sie eine Echtzeit-Github-Ausgabe-Aufgabenliste mit CANJS

Dieses Tutorial zeigt, dass das Erstellen einer Echtzeit-To-Do-List-Anwendung mithilfe von CANJS erstellt wird, wobei die Ausgabliste von Github und die Webhook-API für dynamische Updates nutzt. Die Anwendung zeigt die MVVM -Architektur von Canjs und ihre Schlüsselpakete: can-component, can-connect, can-define und can-stache. JQuery UI verbessert die Interaktivität mit Drag-and-Drop-Neuordnung.

Schlüsselmerkmale und Lernergebnisse:

• Echtzeit-GitHub-Integration: Die App aktualisiert dynamisch als GitHub-Ausgaben dank der Webhook-API.
• MVVM-Architektur: Verstehe, wie die Kernpakete von CANJS die Modell-View-View-ViewModel-Entwicklung erleichtern.
• CANJS -Komponenten: bauen und verwenden Sie benutzerdefinierte CANJS -Komponenten für Modularität und Wiederverwendbarkeit.
• Datenbindung: Implementieren Sie sowohl Einweg- als auch Zwei-Wege-Datenbindung für den nahtlosen Datenfluss.
• Drag & drop-Neuordnung: Verwenden Sie die JQuery UI, um eine interaktive Nachbestellung von Problemen zu ermöglichen, wobei Änderungen über den Server bestehen bleiben.
• Lokales Server -Setup (NODE.JS): Konfigurieren Sie einen lokalen Server, um Daten Persistenz und Webhook -Ereignishandhabung zu verwalten.

canjs und das MVVM -Muster:

canjs verwendet die MVVM-Architektur (Modell-View-ViewModel). Untersuchen wir seine Komponenten:

• Datenmodelle (can-define): Die Anwendungsmodelle individuelle Probleme und Listen von Problemen unter Verwendung can-define/map/map (für Objekte) und can-define/list/list (für Arrays). Diese sind beobachtbar und aktualisieren automatisch die Ansicht bei Änderungen. Ein Beispiel Issue Modell:

<code class="language-javascript">import DefineMap from 'can-define/map/map';
const Issue = DefineMap.extend('Issue', {
  id: 'number',
  title: 'string',
  sort_position: 'number',
  body: 'string'
});</code>

• Ansichtsvorlagen (can-stache): canjs verwendet can-stache, einen Lenker-ähnlichen Vorlagenmotor, um die HTML-UI zu rendern. Beispiel:

<code class="language-html"><ol>
  {{#each issues}}
    <li>{{title}}</li>
  {{/each}}
</ol></code>

• Ansichtsmodelle: Das ViewModel fungiert als Vermittler mit Logik nicht direkt im Modell. In CanJs werden can-stache Vorlagen mit einem ViewModel gerendert.

• Komponenten (can-component): Komponenten inkapselern Ansicht, ViewModel und Ereignisbehandlung, Förderung der Code -Wiederverwendbarkeit.

Projekt -Setup:

1. Erstellen Sie ein Projektverzeichnis und eine Dateien (index.html, app.css, app.js).
2. Fügen Sie die notwendigen Bibliotheken (JQuery, JQuery UI, Canjs, Socket.io) in index.html
ein.
3. app.css style die Anwendung mit
(Bootstrap wird empfohlen).
4. github-issue-server Richten Sie einen lokalen Server mit
ein (benötigt Node.js und NPM). Dadurch wird mit Github Webhook -Ereignissen und Datenpersistenz behandelt. Erhalten Sie ein GitHub Personal Access Token zur Authentifizierung.

Schritt-für-Schritt-Entwicklung:

1. Basic CanJS -Setup:
Erstellen Sie eine einfache "Hello World" CanJS -Anwendung, um sich mit dem Framework vertraut zu machen.
2. GitHub -Probleme Komponente: github-issues Entwickeln Sie eine benutzerdefinierte CANJS -Komponente (
), um GitHub -Probleme anzuzeigen und zu verwalten.
3. GitHub -Repository -Konfiguration:
Konfigurieren Sie ein Github -Repository und richten Sie einen Webhook ein, um Ereignisse an Ihren lokalen Server zu senden.
4. Abrufenprobleme: can-connect Verwenden Sie
, um Probleme aus dem Github -Repository abzurufen und anzuzeigen.
5. Erstellen von Problemen:
Fügen Sie ein Formular hinzu, um neue Probleme zu erstellen und sie über die API an GitHub zu senden.
6. Echtzeit-Updates (Socket.io):
Integrieren Sie Socket.io, um Echtzeit-Updates von GitHub zu verarbeiten.
7. Drag & drop-Neuordnung: sortable Implementieren Sie die Drag-and-Drop-Funktionalität mithilfe der Methode von Jquery UI.

Der vollständige Quellcode ist auf GitHub verfügbar (Link im Originalartikel). Das Tutorial endet mit einem FAQ

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Echtzeit-Github-Ausgabe-Aufgabenliste mit CANJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!