Cara Membina Senarai To-Time Github Masa Nyata Dengan CanJS

Tutorial ini menunjukkan membina aplikasi senarai tugasan masa nyata menggunakan CanJS, memanfaatkan senarai isu GitHub dan Webhook API untuk kemas kini dinamik. Aplikasi ini mempamerkan seni bina MVVM CanJS dan pakej utamanya: can-component, can-connect, can-define, dan can-stache. JQuery UI meningkatkan interaktiviti dengan penyusunan semula drag-and-drop.

Ciri -ciri Utama & Hasil Pembelajaran:

• Integrasi GitHub masa nyata: Apl mengemas kini secara dinamik sebagai isu GitHub berubah, terima kasih kepada Webhook API.
• MVVM Architecture: Memahami bagaimana pakej teras CanJS memudahkan pembangunan model-view-viewmodel.
• komponen canjs: Bina dan gunakan komponen Cust Cust untuk modularity dan kebolehgunaan semula.
• mengikat data: melaksanakan kedua-dua data satu arah dan dua hala yang mengikat untuk aliran data lancar.
• penyusunan semula drag-and-drop: Gunakan JQuery UI untuk membolehkan penyusunan semula isu interaktif, dengan perubahan berterusan melalui pelayan.
• Persediaan Pelayan Tempatan (Node.js): Konfigurasi pelayan tempatan untuk menguruskan ketekunan data dan pengendalian acara webhook.

canjs dan corak MVVM: CanJS menggunakan seni bina MVVM (Model-View-ViewModel). Mari kita periksa komponennya:

Model data (
• ): Model aplikasi isu individu dan senarai isu menggunakan can-define (untuk objek) dan (untuk tatasusunan). Ini boleh diperhatikan, secara automatik mengemas kini paparan apabila perubahan. Contoh can-define/map/map model: can-define/list/list Issue

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

Lihat templat (
• ): menggunakan enjin templating seperti hendal, untuk menjadikan HTML UI. Contoh: can-stache can-stache

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

Lihat model:
• ViewModel bertindak sebagai perantara, pengendalian logik tidak langsung dalam model. Dalam canjs,

  templat diberikan dengan viewmodel. can-stache

Komponen (
• ):

  Komponen merangkumi pandangan, viewmodel, dan pengendalian acara, mempromosikan kebolehgunaan semula kod. can-component

Persediaan Projek:

1. Buat direktori dan fail projek (index.html, app.css, app.js).
termasuk perpustakaan yang diperlukan (jQuery, jQuery ui, canjs, socket.io) dalam
2. . index.html
gaya aplikasi menggunakan
3. (bootstrap disyorkan). app.css
Sediakan pelayan tempatan menggunakan
4. (memerlukan node.js dan npm). Ini mengendalikan acara webhook GitHub dan kegigihan data. Dapatkan token akses peribadi github untuk pengesahan. github-issue-server

Pembangunan langkah demi langkah:

1. Persediaan asas CanJS: Buat aplikasi "Hello World" mudah untuk membiasakan diri dengan rangka kerja.
2. Komponen isu GitHub: Membangunkan komponen CanJS Custom () untuk memaparkan dan menguruskan isu GitHub. github-issues
konfigurasi repositori GitHub:
3. Konfigurasi repositori GitHub dan sediakan webhook untuk menghantar acara ke pelayan setempat anda.
mengambil isu -isu:
4. Gunakan untuk mengambil dan memaparkan isu -isu dari repositori GitHub. can-connect
Membuat isu:
5. Tambahkan borang untuk membuat isu -isu baru dan hantar mereka ke GitHub melalui API.
kemas kini masa nyata (socket.io):
6. mengintegrasikan soket.io untuk mengendalikan kemas kini masa nyata dari github.
drag-and-drop reordering:
7. Melaksanakan fungsi drag-and-drop menggunakan kaedah JQuery UI . sortable
Kod sumber lengkap boleh didapati di GitHub (pautan yang disediakan dalam artikel asal). Tutorial ini disimpulkan dengan bahagian Soalan Lazim yang menangani soalan umum mengenai integrasi CanJs dan GitHub.

Atas ialah kandungan terperinci Cara Membina Senarai To-Time Github Masa Nyata Dengan CanJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!