Biarkan Mavo bersinar dalam membina aplikasi web interaktif

Tutorial ini akan menyelam ke Mavo: cara yang mudah dan mudah digunakan untuk mewujudkan aplikasi web yang rumit, responsif, berterusan dengan menulis HTML dan CSS tanpa garis kod JavaScript atau backend pelayan.

Mavo dibangunkan oleh Kumpulan Haystack di CSAIL di MIT dan diketuai oleh Lea Verou.

Kami akan bersama -sama membina aplikasi FlashCard untuk pembelajaran bahasa asing . Ini adalah aplikasi CRUD berfungsi sepenuhnya yang membolehkan anda:

• Buat, hapus, kemas kini flashcards dan susun semula dengan seret dan jatuhkan.
• Import dan Eksport Flashcards.
• Menilai tahap penguasaan kata -kata pada flashcards.

Inilah caranya permohonan yang kami selesaikan:

Dalam tutorial ini, saya akan membimbing anda melalui keseluruhan proses membina permohonan anda.

Pada akhir beberapa langkah, saya akan memberi anda nasihat untuk cuba menggunakan Mavo - belajar lebih banyak - dan membuat beberapa peningkatan kepada aplikasi yang kami bina.

Bersedia? Mari mulakan! ?

Templat statik

Untuk menggambarkan bagaimana Mavo meningkatkan HTML standard, kami akan mula membuat halaman HTML statik yang tulen dan kemudian menggunakan Mavo untuk menukar HTML statik ini ke dalam aplikasi web berfungsi sepenuhnya.

Katakan kami berada dalam kod HTML berikut:

<h1 id="Flashcard"> Flashcard</h1>
<main><p>Perkataan atau frasa</p>
  <p>Terjemahkan</p>
</main>

Dalam kod ini,<main></main> Unsur -unsur mewakili satu flashcard tunggal.

Mari tambahkan beberapa gaya untuk menjadikan HTML kami kelihatan seperti aplikasi FlashCard sebenar. Anda boleh melihat kod sumber dan menggunakannya di sini.

Bermula dengan Mavo

Sekarang, kami hanya mempunyai templat statik. Sudah tiba masanya untuk menambah ciri supaya ia benar -benar dapat berfungsi seperti aplikasi FlashCard. Mavo membuat debut cemerlang!

Untuk menggunakan Mavo, kita perlu terlebih dahulu Sebahagiannya mengandungi fail JavaScript dan CSS:

 …
  <link href="https://get.mavo.io/mavo.css" rel="stylesheet">
  …

Anda mungkin perlu menyokong penyemak imbas yang lebih tua, atau ingin membaca kod tersebut? Anda boleh menyesuaikan versi dan membina yang anda gunakan dengan menjawab beberapa soalan.

Tentukan aplikasi Mavo

Untuk membolehkan fungsi Mavo pada struktur HTML, kita mesti menggunakan atribut mv-app pada elemen yang mengandungi aplikasi Mavo (bahkan boleh atau Unsur, semuanya baik -baik saja! ). Nilainya ialah ID aplikasi dan harus unik di halaman. Jika kita menggunakan <code>mv-app tanpa nilai dan tiada atribut id atau name pada elemen yang sama, nama seperti mavo1 , mavo2 , dan lain-lain akan dihasilkan secara automatik.

Walau bagaimanapun, sangat disyorkan bahawa anda menamakan aplikasi Mavo, kerana nama itu akan digunakan di banyak tempat.

Pertimbangkan<main></main> Unsur ini mewakili aplikasi Mavo kami, mari tambahkan atribut mv-app kepadanya dan tentukan "flashcards" ID untuk permohonan kami:

<main mv-app="flashcards">
  …
</main>

Atribut atribut

Sudah tiba masanya untuk memberitahu Mavo elemen aplikasi yang penting , iaitu unsur -unsur yang kita mahu diedit dan disimpan.

Sekarang kita mempunyai dua elemen seperti itu, mereka<p> elemen. Mari tambahkan atribut <code>property kepada unsur -unsur ini untuk memberitahu Mavo bahawa mereka mengandungi data. Unsur dengan atribut property dipanggil harta .

Kami boleh meletakkan harta property di mana -mana elemen HTML5 dan Mavo tahu bagaimana untuk membuatnya boleh diedit. Contohnya,<input> , anda boleh mengedit kandungannya, tetapi<time></time> Membolehkan anda mengedit tarikh/masa dengan pemilih tarikh/masa yang sesuai.

Anda juga boleh memperluaskan peraturan ini melalui plugin dan membuat unsur -unsur yang boleh diedit dengan cara baru (contohnya, teks kaya).

Ingat bahawa nilai atribut property harus menggambarkan elemen yang serupa dengan atribut id atau class :

 …

  <p property="source">Perkataan atau frasa</p>
  <p property="translation">Terjemahkan</p>

…

Jika anda sudah mempunyai atribut class , id , atau itemprop yang menggambarkan sepenuhnya elemen, anda boleh menggunakan property tanpa nilai, seperti property="source" .

Pernahkah anda perasan apa -apa perubahan dalam permohonan kami? Bar alat Mavo dengan butang edit muncul di bahagian atas halaman. Butang Edit membolehkan pengguna menukar antara mod bacaan dan penyuntingan. Sekarang aplikasi kami dalam mod bacaan. Ini bermakna kita tidak boleh mengedit data pada halaman.

Bar alat Mavo benar -benar disesuaikan , dan memang benar bahawa hampir semua UI yang dihasilkan oleh Mavo: anda boleh menukar lokasinya, memadam gaya lalainya, menambah elemen butang tersuai, atau gunakan elemen HTML anda sendiri, dan banyak lagi.

Kami akan melihat contoh tersuai seperti ini kemudian dalam tutorial ini.

Lawati bahagian laman web Mavo ini untuk mengetahui lebih lanjut.

Sekarang mari kita beralih ke mod Edit dengan mengklik butang Edit . Apa yang telah berubah? Teks butang Edit menjadi penyuntingan untuk menunjukkan bahawa kita berada dalam mod penyuntingan. Jika anda melayang di atas perenggan, Mavo memberitahu anda bahawa anda boleh mengklik untuk mengeditnya dengan menonjolkannya dengan kuning. Mari mulakan! Klik teks dan editnya. Wow! Kami boleh menukar kandungan secara langsung pada halaman!

Anggapkan bahawa sebagai tambahan kepada kata -kata dan terjemahan mereka, flashcard juga harus mengandungi contoh bagaimana kata -kata digunakan dalam ayat. Tingkatkan permohonan dengan menambahkan unsur -unsur yang sepadan dengan flashcard.

atribut mv-multiple

Pada masa ini, hanya ada satu flashcard dalam aplikasi kami. Ini tidak berguna! Untuk aplikasi FlashCard yang berkesan, kami perlu menambah, memadam dan menyusun semula flashcards. Bagaimana kita boleh melakukan ini? Kita boleh menambah lebih banyak kod<main></main> Unsur -unsur untuk membuat lebih banyak flashcards, tetapi bagaimana pengguna akhir membuat dan memadam flashcards?

Nasib baik, Mavo menyediakan sesuatu yang menjadikan ini mudah: harta mv-multiple , yang memberitahu Mavo bahawa unsur-unsur tertentu dapat disalin . Ia menukarkan unsur -unsur yang digunakannya menjadi koleksi item yang boleh diedit dan menghasilkan (disesuaikan) UI untuk menambah, memadam, dan menyusun semula item.

Jika anda menggunakan mv-multiple pada elemen tanpa atribut property , Mavo secara automatik akan menambah property="collection" kepadanya (atau collection2 , collection3 , dan lain-lain untuk membuat nama unik). Walau bagaimanapun, adalah disyorkan bahawa anda juga menggunakan harta property , namakan koleksi anda, dan pastikan bahawa HTML anda berubah untuk mengekalkan datanya.

Mari kita menukar flashcard kesepian kami ke dalam koleksi flashcard menggunakan atribut mv-multiple dalam aplikasi kami:

 …    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">Perkataan atau frasa</p>
    <p property="translation">Terjemahkan</p>
  </main>

Anda juga boleh menentukan nama harta sebagai nilai mv-multiple , seperti mv-multiple="flashcards" .

Atribut mv-multiple terletak pada elemen yang akan disalin, bukan pada bekas koleksi. Salah satu kesilapan yang dibuat oleh orang adalah menggunakan<main mv-multiple></main> Sebaliknya<main></main>

, dan biasanya tidak ditemui untuk masa yang lama sebelum memeriksa elemen atau gaya untuk menjadikannya jelas. Sekarang tukar aplikasi ke mod edit. Sila ambil perhatian bahawa di bawah flashcard, kini terdapat butang tambah flashcard . Mari kita cuba: Gunakan butang ini untuk membuat beberapa flashcards. Sekarang kita boleh menambah unsur -unsur baru secara dinamik secara langsung dalam aplikasi, walaupun tidak ada elemen yang sepadan dalam HTML. Tetapi itu bukan semua!

Sila ambil perhatian bahawa<main></main> property di harta itu sebenarnya tidak menjadikan keseluruhannya<main></main> Unsur -unsur boleh diedit, tetapi bertindak sebagai elemen kumpulan . Ini berlaku apabila anda menggunakan sifat property pada unsur -unsur yang mengandungi sifat lain. Cuba hovering tetikus anda ke atas flashcard dan perhatikan tiga butang yang terdapat di sudut kanan atasnya untuk menambah , memadam , dan menyusun semula unsur-unsur dengan mengendalikan drag-and-drop. Dengan melayang di mana -mana butang bar item, kita dapat memahami flashcard mana yang mereka sesuai dengan: Mavo akan menyerlahkannya. Bukankah sangat ajaib?

Anda boleh menyesuaikan mana-mana elemen UI yang dihasilkan oleh Mavo, sebagai contoh, anda boleh membuat pemegang seret anda sendiri dengan menggunakan kelas mv-drag-handle .

Butang yang ditambahkan pada setiap item dalam koleksi juga boleh diakses melalui papan kekunci . Malah menyusun semula: anda boleh memberi tumpuan kepada pemegang seret dan menggunakan kekunci anak panah untuk memindahkan item tersebut.

atribut mv-storage

Sekarang kita mempunyai UI asas, mari kita cuba yang berikut:

• Tukar ke mod edit (jika anda belum melakukannya).
• Edit perkataan sumber dan terjemahan flashcard pertama. Tambah beberapa flashcards.
• Tukar aplikasi kembali ke mod bacaan.
• Akhirnya ... menyegarkan halaman.

Apa? ! Di manakah data kami pergi? Tidakkah Mavo menyelamatkannya? Apa yang berlaku?

Malah, kami tidak pernah memberitahu Mavo sama ada atau di mana untuk menyimpan data kami!

Untuk melakukan ini, kita perlu menggunakan harta mv-storage . Apa pilihan yang kita ada? Nah, Mavo membuka kemungkinan besar untuk kami, dan Mavo Plugin membuka lebih banyak kemungkinan!

Dalam aplikasi kami, kami menyimpan data dalam localStorage pelayar, yang merupakan salah satu pilihan yang paling mudah, jadi ia sesuai untuk aplikasi Mavo pertama kami. Kami hanya perlu menambah mv-app mv-storage dengan nilai local pada elemen (juga dipanggil mavo root ).

<main mv-app="flashcards" mv-storage="local">
  …
</main>

Lihatlah bar alat Mavo. Adakah anda perasan sesuatu? Butang lain muncul - butang Simpan .

Cuba mengedit data aplikasi sekali lagi. Perhatikan bahawa butang Simpan kini diserlahkan . Hover ke atas butang Simpan dan Mavo akan menyerlahkan sifat dengan data yang tidak diselamatkan . Bukankah itu sejuk?

Klik butang Simpan dan muat semula halaman (tidak perlu beralih ke mod bacaan sebelum menyegarkan halaman). Adakah data anda masih ada? Sangat bagus! Kami adalah satu langkah lebih dekat dengan matlamat kami-aplikasi flashcard yang lengkap.

mv-autosave

Sekarang kita perlu mengklik butang Simpan setiap kali kita perlu menyimpan data? Ini mungkin lebih selamat dan menghalang data berharga daripada rosak, tetapi ia sering menyusahkan. Bolehkah kita menyimpan data secara automatik? Sudah tentu! Untuk menyimpan data secara automatik setiap kali kita mengubahnya, kita boleh menggunakan harta mv-autosave pada elemen akar Mavo. Nilainya adalah bilangan detik yang disimpan oleh pendikit. Mari tambahkan mv-autosave="3" ke elemen akar permohonan:

<main mv-app="flashcard" mv-autosave="3" mv-storage="local">
  …
</main>

Jika mv-autosave="3" , Mavo hanya boleh diselamatkan sekali setiap tiga saat. Ini amat berguna untuk backend yang menyimpan sejarah perubahan (mis., GitHub , Dropbox ) untuk mencegah banjir, yang menjadikan sejarah itu tidak berguna.

Untuk melumpuhkan pendikit dan simpan dengan segera, kita boleh menggunakan mv-autosave="0" atau hanya gunakan mv-autosave , yang juga menghilangkan butang simpan dari UI (kerana ia tidak berguna dalam kes ini).

Tukar data sekali lagi dan lihat butang Simpan . Adakah anda pernah melihatnya? Pada mulanya ia diserlahkan, tetapi selepas 3 saat - ia tidak diserlahkan. Semua data kami kini disimpan secara automatik!

Jadi sekarang bahagian utama aplikasi kami kelihatan seperti ini:

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source"> Perkataan atau frasa</p>
        <p property="translation">Terjemahkan</p>
      </main>

Kami hampir menyelesaikan versi alfa aplikasi. Sekarang giliran anda untuk menjadikan aplikasinya lebih baik. Jangan risau, anda mempunyai semua pengetahuan yang anda perlukan.

Tingkatkan aplikasi supaya flashcards dapat dianjurkan oleh pengguna akhir ke dalam kumpulan yang berbeza yang berkaitan dengan pelbagai topik, contohnya, pengguna dapat mengumpul semua flashcards yang berkaitan dengan pakaian ke dalam satu kumpulan, semua perkakas dapur ke dalam kumpulan lain, dan sebagainya.

? Petunjuk!

Terdapat banyak cara untuk mencapai matlamat ini, bergantung kepada apa yang anda memutuskan untuk mengikuti. Walau bagaimanapun, saya harap anda berfikir tentang beberapa isu sebelum meneruskan:

1. Apa elemen HTML yang akan anda gunakan sebagai elemen kumpulan ? Ia akan mudah jika pengguna dapat melihat nama dek Flash (nama tema) dan boleh meruntuhkan kumpulan ke tajuk.
2. Apa sifat Mavo yang akan anda tambahkan ke elemen itu (jika ada)? Adakah elemen ini akan menjadi atribut atau koleksi ?
3. Bolehkah pengguna akhir menambah topik baru, memadam dan menyusun semula mereka, menukar tajuk topik, dan menggerakkan flashcards antara topik?

Jika anda memutuskan untuk tidak menyusun flashcards mengikut kumpulan, tetapi sebaliknya menandakannya dengan label yang sepadan dengan pelbagai topik, itu baik -baik saja. Penyelesaian menggunakan tag juga sesuai. Untuk amalan, cuba selesaikan kaedah ini.

atribut mv-bar

Kerana aplikasi kami menyimpan data secara tempatan, secara lalai, pengguna aplikasi tidak akan dapat berkongsi kad mereka dengan pengguna lain. Bukankah lebih baik jika kita membenarkan mereka mengeksport flashcards mereka dan mengimport kad kilat orang lain? Syukurlah, ciri -ciri ini telah dilaksanakan di Mavo dan kami dapat dengan mudah menambahkannya ke aplikasi kami!

Kawalan harta mv-bar butang yang (jika ada) akan dipaparkan dalam bar alat. Ia biasanya ditentukan pada akar Mavo (elemen dengan atribut mv-app ). Butang diwakili oleh ID mereka (sangat logik): edit, import, eksport, dll.

Oleh kerana kita mahu menambah hanya beberapa butang ke koleksi lalai, kita boleh menggunakan apa yang dipanggil sintaks relatif , yang membolehkan kita menambah dan memadam butang ke koleksi lalai tanpa menyenaraikan segala -galanya secara eksplisit. Kami hanya perlu bermula dengan with kunci nilai atribut mv-bar .

Dengan melakukan ini, kita akan mendapat yang berikut:

<main mv-app="flashcards" mv-autosave="3" mv-bar="with import export" mv-storage="local">
          …
</main>

Cuba ciri -ciri ini: Tambah beberapa flashcards dan cuba mengeksportnya ke fail. Kemudian padamkan kad flash yang sedia ada dan import flashcard dari fail yang dieksport sebelumnya.

Ekspresi dan Mavoscript

Sekarang mari tambahkan beberapa statistik ke aplikasi kami, seperti bilangan flashcards! Adakah kedengarannya menarik? Saya harap begitu. ?

Untuk melakukan ini, kita perlu mempelajari sesuatu yang baru mengenai Mavo.

Kita boleh merujuk secara dinamik kepada nilai mana -mana harta yang kami tentukan di mana sahaja dalam aplikasi Mavo kami (termasuk dalam HTML Properties) dengan meletakkan namanya dalam kurungan persegi seperti ini: [propertyName] . Berikut adalah contoh ungkapan mudah yang membolehkan kita mengira perkara secara dinamik dan bertindak balas apabila mereka berubah.

Sintaks ekspresi Mavo dipanggil Mavoscript . Ia sama dengan formula spreadsheet, yang membolehkan kami melakukan pengiraan dan operasi lain (menggunakan nombor, teks, senarai, dan lain -lain), tetapi direka untuk lebih mudah dibaca dan disesuaikan dengan hubungan bersarang. Anda boleh mengetahui lebih lanjut mengenai ekspresi Mavo dan Mavoscript dalam dokumentasi.

Sekarang mari kita cuba, tambahkan ungkapan [source] di dalam atribut flashcard, contohnya, antara dua sifat: sumber dan terjemahan.

 …
  <p property="source">Perkataan atau frasa</p>
  [Sumber]
  <p property="translation">Terjemahkan</p>
…

Apa yang telah berubah dalam permohonan kami? Nilai atribut Sumber FlashCard kini dipaparkan dua kali pada halaman.

Tukar ke mod edit dan cuba menukar nilai atribut sumber. Adakah anda pernah melihatnya? Kandungan halaman akan dikemas kini apabila anda menukar nilai atribut! Inilah sebabnya saya katakan sebelum ini bahawa Mavo membolehkan kami membangunkan aplikasi web yang responsif.

Ini benar -benar sejuk, tetapi malangnya, dalam kes kita tidak berfungsi banyak: kita tidak boleh menggunakan ungkapan ini untuk mengira bilangan flashcards - kita sentiasa mempunyai satu nilai .

Apa yang berlaku jika kita meletakkan ungkapan [source] di luar atribut flashcard? Kami akan mendapat perkara berikut:

 …
  [Sumber]

    …

…

Bagaimanakah ini berbeza dengan kes -kes sebelumnya? Untuk melihat perbezaan, jika anda tidak melakukannya, tambahkan beberapa flashcards. Sekarang, kita bukan nilai , tetapi senarai nilai yang dipisahkan koma : sifat sumber untuk semua flashcards. Inilah yang selalu kita cari: bilangan item dalam senarai sepadan dengan bilangan flashcards dalam aplikasinya.

Adakah ia masuk akal? Ya, tetapi tidakkah lebih logik jika kita mengira bilangan flashcards dan bukannya bilangan nilai atribut sumbernya? Lagipun, flashcard tambahan wujud walaupun sebelum kami mengisi sumber atau terjemahannya. Saya cadangkan anda melakukan perkara berikut: mari menggantikan ungkapan [source] dengan [flashcard] :

 …
  [flashcard]

    …

…

Adakah anda perasan perbezaannya? Kami masih mempunyai senarai, tetapi nilainya bukan nilai mudah, tetapi objek , iaitu, nilai kompleks yang mengandungi semua data yang berkaitan dengan setiap flashcard. Berita baiknya ialah bilangan objek ini sama dengan bilangan flashcards, kerana setiap flashcard mempunyai satu, walaupun ia benar -benar kosong. Jadi, sekarang kita mempunyai objek untuk setiap flashcard, tetapi bagaimana kita mengira mereka dan memaparkan jumlahnya?

Sekarang mari kita kenal dengan fungsi Mavoscript dan cari fungsi yang membolehkan kita mengira bilangan flashcards. Ingat, kami mempunyai senarai FlashCard , jadi kami perlu mencari fungsi yang membolehkan kami mengira bilangan item dalam senarai . Di sini - ini adalah bagaimana fungsi count() melakukannya!

Tetapi bagaimana kita menggunakan fungsi dalam ekspresi? Apakah peraturan yang perlu kita perhatikan? Ya, ada beberapa:

1. Ekspresi diwakili dalam kurungan persegi.
2. Jangan bersarang.

Mari cuba gunakan fungsi count() untuk mengira bilangan flashcards:

 …
[kiraan (flashcard)]

  …

…

Itulah yang kami lakukan - sekarang terdapat beberapa statistik dalam aplikasi kami! Bukankah itu sejuk?

Saya harap anda sudah hangat dan bersedia untuk terus mencuba Mavo.

Meningkatkan permohonan supaya bukan sahaja memaparkan statistik mengenai jumlah flashcards dalam aplikasi, tetapi juga statistik mengenai bilangan flashcard dalam setiap topik, jika ada.

? Petunjuk!
Mahu menapis senarai berdasarkan kriteria tertentu? Pengendali where akan membantu.

Fungsi penilaian diri

Kami sudah mempunyai aplikasi yang membolehkan kami membuat, mengedit dan menyimpan beberapa flashcards. Tetapi bagaimana kita menjejaki flashcards yang telah kita pelajari dan flashcard mana yang memerlukan lebih banyak amalan? Sebarang aplikasi flashcard yang dihormati memerlukan ciri penilaian sendiri. Mari lihat bagaimana kita menambahkannya!

Katakan dalam permohonan kami, kami mempunyai dua butang untuk penilaian diri: miskin dan baik. Apa yang kita mahu berlaku setiap kali pengguna akhir mengklik butang? Nah, idea ini mudah:

• Mengklik butang "miskin" akan menunjukkan bahawa pengguna belum mempelajari perkataan itu dan kami mahu aplikasi kami memindahkan flashcard yang sepadan ke permulaan senarai supaya mereka dapat melihatnya secepat mungkin selepas melancarkan aplikasi.
• Mengklik butang "OK" akan menunjukkan bahawa pengguna telah mempelajari perkataan itu, dan flashcard yang sepadan perlu dipindahkan ke akhir senarai untuk membolehkan mereka menggunakan flashcards lain yang belum mereka pelajari.

"Adakah anda pasti dapat melakukan ini tanpa JavaScript?" anda mungkin bertanya. Ya! Mavo sangat kuat dan dapat memberikan kita semua alat yang kita perlukan!

Sekarang kita tahu apa yang akan kita laksanakan, mari kita sediakan UI terlebih dahulu dan beralih ke langkah seterusnya. Tag kami kelihatan seperti ini:

 …

  …
  <h2 id="Menilai-diri-anda">Menilai diri anda</h2>
    <button>Perbezaan</button>
    <button>baik</button>


…

atribut mv-action

Operasi Mavo membolehkan kami membuat kawalan kami sendiri yang mengubah suai data dengan cara tersuai apabila pengguna berinteraksi dengan mereka. Bunyi menjanjikan, bukan?

Untuk menentukan tindakan tersuai, kita perlu menggunakan atribut mv-action pada unsur-unsur yang sepadan dalam aplikasi Mavo. Ini dilakukan setiap kali elemen diklik. Inilah yang selalu kita cari.

untuk<form> Unsur, tindakan tersuai dilakukan apabila borang <em>diserahkan</em> . Nilai harta <code>mv-action adalah ungkapan. Kami boleh menggunakan sebarang fungsi ungkapan dan sintaks yang diberikan kepada kami oleh Mavoscript, serta beberapa fungsi lain untuk memudahkan manipulasi data, seperti add() , set() , move() , atau delete() . Adalah penting untuk diperhatikan bahawa tidak seperti ungkapan biasa yang dikira secara reaktif, ungkapan ini hanya dikira setiap kali operasi dicetuskan.

Mavo menjangkakan nilai harta mv-action menjadi ungkapan, jadi tidak perlu melampirkannya dalam kurungan : mv-action="expression" . Selain itu, jika kita memasukkannya, mereka akan dianggap sebagai bahagian ungkapan.

Oleh itu, kita perlu memindahkan flashcards dalam koleksi, dan Mavo mempunyai fungsi yang sesuai yang membolehkan kita melakukan ini - fungsi move() . Parameter pertama merujuk kepada item yang kami bergerak, dan parameter kedua adalah kedudukannya dalam koleksi. Ingat bahawa unsur -unsur koleksi bermula dari 0.

Untuk maklumat lanjut mengenai fungsi move (dan varian mereka) dan tindakan tersuai, lihat dokumentasi.

Mari kita melaksanakan titik pertama garis besar yang dibincangkan sebelumnya: Semasa penilaian diri, pengguna akhir mengklik butang "miskin" dan flashcard yang sepadan akan bergerak ke permulaan set, yang merupakan yang pertama. Jadi dalam kod, kita ada:

 …

  …
  <button mv-action="move(this, 0)">Perbezaan</button>
  …

…

Perhatikan bahawa dalam harta mv-action , kami merujuk atribut FlashCard di dalam atribut kerana kami mahu memproses flashcard semasa .

Jika kita cuba melaksanakan titik kedua garis besar, kita akan menghadapi masalah. Bolehkah anda mencadangkan apa sebenarnya masalahnya?

Ingatlah bahawa jika pengguna akhir mengklik butang "OK", flashcard yang sepadan akan bergerak ke hujung koleksi, yang merupakan yang terakhir. Agar flashcards menjadi yang terakhir dalam set, kita perlu mengetahui bilangan item dalam set.

Syukurlah, kami telah menyelesaikan tugas ini sebelum dan melaksanakan fungsi yang sepadan. Tetapi bolehkah kita menggunakan penyelesaian ini untuk menyelesaikan masalah semasa kita? Malangnya, kita tidak boleh: Seperti yang sudah kita ketahui, kita hanya boleh merujuk pengumpulan flashcards (dan menilai saiznya) di luar sifat Flashcard. Tetapi dalam kes kita, kita perlu melakukannya: kita perlu menulis ungkapan untuk butang "baik" di dalam atribut flashcard.

Jadi apa yang harus kita lakukan? Saya gembira anda bertanya. Mavo mempunyai penyelesaian.

Simpan nilai pertengahan menggunakan elemen meta

Oleh itu, di satu pihak, kita tahu bahawa ungkapan [count(flashcards)] akan memberi kita bilangan flashcards apabila menilai sifat flashcard secara luaran . Sebaliknya, kita perlu menggunakan atribut flashcard nilai di dalamnya.

Untuk menyelesaikan teka -teki ini, kita perlu menilai bilangan flashcards dalam kod kami dan menyimpan hasilnya dalam beberapa cara supaya kami dapat menggunakannya di tempat lain dalam aplikasi, tepat di dalam sifat flashcard. Untuk kes ini, di Mavo, terdapat ciri-ciri pengiraan yang dipanggil.

Untuk menyelamatkan hasil pertengahan supaya kita dapat merujuknya, kita memerlukan elemen HTML dalam kod. Disarankan untuk menggunakannya untuk tujuan ini<meta> Unsur, seperti yang ditunjukkan di bawah:<meta content="[expression]" property="propertyName"> . Kelebihan menggunakan elemen ini adalah bahawa ia tersembunyi di luar mod pengeditan, secara semantik dan visual.

Ingat bahawa sifat yang dikira tidak disimpan secara lalai.

Sekarang mari tambahkan harta yang dikira flashcardCount dalam permohonan kami. Ingat, kita perlu meletakkannya di luar atribut flashcard, tetapi kemudian kita boleh merujuknya dari mana -mana sahaja:

 …
<meta content="[count(flashcard)]" property="flashcardCount">
    …

…

Hanya ada satu langkah yang tersisa untuk melengkapkan pelaksanaan fungsi penilaian diri: Jika pengguna akhir mengklik butang "OK", flashcard yang sepadan akan dipindahkan ke akhir set, yang akan menjadi yang terakhir. Mari tambahkan tindakan yang relevan ke kod aplikasi:

 …
<meta content="[count(flashcard)]" property="flashcardCount">
  …
  <button mv-action="move(this, flashcardCount)">baik</button>

…

Kami sudah selesai! Tahniah! ?

Terdapat satu lagi cara untuk menyelesaikan tugas ini: dengan bantuan $all atribut khas . Jika atribut $all berada di dalam koleksi , ia mewakili koleksi itu sendiri. Oleh itu, tiada sifat yang dikira diperlukan dalam kes ini. Cuba laksanakan penyelesaiannya sendiri.

Hanya ada satu perkara terakhir yang perlu kita selesaikan. Ingat bahagian yang kami tambah beberapa statistik ke aplikasinya? Ingat ungkapan yang kami bina untuk menilai bilangan flashcards dalam aplikasi: [count(flashcard)] ? Sebaliknya, kita kini boleh menggunakan (dan harus menggunakan) sifat -sifat yang dikira yang kita tentukan. Buat perubahan yang sepadan dalam permohonan.

kesimpulannya

Jadi apa yang telah kita pelajari setakat ini? Mari kita tinjau. Untuk menukar mana -mana halaman HTML statik ke dalam aplikasi Mavo, kita perlukan:

1. Pada halaman Sebahagiannya mengandungi fail Mavo JavaScript dan CSS.
2. Tambah atribut mv-app ke elemen akar Mavo.
3. Beritahu Mavo unsur -unsur permohonan kami penting dengan menambahkan atribut property kepada mereka.
4. Letakkan atribut mv-multiple pada elemen yang akan disalin dan ditukar kepada koleksi.
5. Beritahu Mavo di mana untuk menyimpan data kami dengan menambahkan atribut mv-storage ke akar Mavo.
6. Tentukan sama ada Mavo harus menyimpan data kami secara automatik. Jika ya, tambah harta mv-autosave ke akar Mavo. Kami juga tahu:
7. Bar alat Mavo benar -benar disesuaikan. Kawalan harta mv-bar butang yang akan dipaparkan.
8. Ekspresi membolehkan kita memaparkan nilai semasa atribut dalam elemen lain dan melakukan pengiraan. Nilai (dan jenis) ungkapan bergantung pada di mana ungkapan berada dalam kod. Sintaks ekspresi Mavo dipanggil Mavoscript.
9. Tindakan tersuai membolehkan penciptaan kawalan yang mengubah suai data dengan cara tersuai. Untuk menentukan tindakan tersuai pada unsur-unsur yang sepadan dalam aplikasi Mavo, tetapkan harta mv-action .
10. Atribut dengan nilai ungkapan dipanggil atribut yang dikira. Untuk menyelamatkan hasil pertengahan supaya dapat dirujuk di tempat lain dalam permohonan, disarankan untuk digunakan<meta> elemen.

PostScript

Jadi kami membina permohonan kami. Adakah sempurna? Sudah tentu tidak, tidak ada yang sempurna! Terdapat banyak untuk memperbaiki, dan terdapat banyak ciri untuk ditambah (kami juga boleh berbilang flosual aplikasi kami dengan bantuan Mavo!). Teruskan dan tingkatkan lagi dan jangan ragu untuk mencuba sesuatu yang baru!

Setakat ini, pengetahuan kami tentang Mavo hanyalah hujung gunung es, dan ada banyak lagi yang perlu dilakukan. Saya menggalakkan anda membaca dokumentasi dengan teliti, periksa contoh -contoh (di laman web Mavo, atau di Codepen: dibuat oleh Lea Verou dan beberapa yang dibuat oleh saya sendiri), dan membuat kandungan baru! Nasib baik! ?

Penghargaan

Saya ingin mengucapkan terima kasih kepada dua orang yang hebat. Pertama sekali, saya ingin mengucapkan terima kasih kepada Lea Verou kerana bukan sahaja memberi inspirasi kepada saya untuk menulis tutorial ini (dan membantu saya melaksanakannya), tetapi juga sentiasa memberi inspirasi kepada saya untuk menjadikan dunia pembangunan web menjadi tempat yang lebih baik. Saya tidak pernah melihat seseorang yang begitu berbakat dan saya gembira kerana mempunyai peluang untuk melakukan sesuatu dengannya!

Saya juga berterima kasih kepada James Moore. Contoh -contoh yang digunakannya dalam kursus "JavaScript Functional Programming For Beginners" pada Udemy mendorong saya untuk membuat versi saya sendiri aplikasi pembelajaran Flashcard. Dia seorang guru yang hebat!

Atas ialah kandungan terperinci Biarkan Mavo bersinar dalam membina aplikasi web interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!