本教程將深入探討Mavo：一種便捷易用的方法，只需編寫(xiě)HTML和CSS，無(wú)需一行JavaScript代碼或服務(wù)器后端，即可創(chuàng)建復(fù)雜、響應(yīng)式、持久化的Web應(yīng)用程序。

Mavo由麻省理工學(xué)院CSAIL的Haystack小組開(kāi)發(fā)，由Lea Verou領(lǐng)導(dǎo)。

我們將共同構(gòu)建一個(gè)外語(yǔ)學(xué)習(xí)用的抽認(rèn)卡應(yīng)用程序。這是一個(gè)功能齊全的CRUD應(yīng)用程序，允許您：

• 創(chuàng)建、刪除、更新抽認(rèn)卡，并通過(guò)拖放重新排列。
• 導(dǎo)入和導(dǎo)出抽認(rèn)卡。
• 評(píng)估您對(duì)抽認(rèn)卡上單詞的掌握程度。

以下是我們完成的應(yīng)用程序的外觀：

在本教程中，我將引導(dǎo)您完成構(gòu)建應(yīng)用程序的整個(gè)過(guò)程。

在某些步驟的結(jié)尾，我將提供一些建議，讓您嘗試使用Mavo——學(xué)習(xí)更多知識(shí)——并對(duì)我們正在構(gòu)建的應(yīng)用程序進(jìn)行一些增強(qiáng)。

準(zhǔn)備好了嗎？讓我們開(kāi)始吧！?

靜態(tài)模板

為了說(shuō)明Mavo如何增強(qiáng)標(biāo)準(zhǔn)HTML，我們將首先創(chuàng)建一個(gè)純靜態(tài)HTML頁(yè)面，然后使用Mavo將這個(gè)靜態(tài)HTML轉(zhuǎn)換為一個(gè)功能齊全的Web應(yīng)用程序。

假設(shè)我們?cè)谝韵翲TML代碼中：

<h1>抽認(rèn)卡</h1>
<main><p>單詞或短語(yǔ)</p>
  <p>翻譯</p>
</main>

在該代碼中，<main></main>元素表示單個(gè)抽認(rèn)卡。

讓我們添加一些樣式，使我們的HTML看起來(lái)更像一個(gè)實(shí)際的抽認(rèn)卡應(yīng)用程序。您可以查看源代碼并在此處使用它。

開(kāi)始使用Mavo

現(xiàn)在，我們只有靜態(tài)模板。是時(shí)候添加功能了，這樣它才能真正像抽認(rèn)卡應(yīng)用程序一樣工作。Mavo閃亮登場(chǎng)！

為了使用Mavo，我們首先需要在頁(yè)面的部分包含其JavaScript和CSS文件：

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

您可能需要支持舊版瀏覽器，或者希望能夠閱讀代碼？您可以通過(guò)回答幾個(gè)問(wèn)題來(lái)自定義您正在使用的Mavo版本和構(gòu)建版本。

定義Mavo應(yīng)用程序

要在HTML結(jié)構(gòu)上啟用Mavo功能，我們必須在包含Mavo應(yīng)用程序的元素上使用mv-app屬性（甚至可以是或元素，都可以?。?。其值為應(yīng)用程序的ID，在頁(yè)面中應(yīng)唯一。如果我們不帶值使用mv-app，并且同一元素上沒(méi)有id或name屬性，則會(huì)自動(dòng)生成諸如mavo1、mavo2等名稱(chēng)。

但是，強(qiáng)烈建議您命名Mavo應(yīng)用程序，因?yàn)樵撁Q(chēng)在許多地方都會(huì)使用。

考慮到<main></main>元素代表我們的Mavo應(yīng)用程序，讓我們向其添加mv-app屬性，并為我們的應(yīng)用程序指定ID“flashcards”：

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

屬性屬性

是時(shí)候告訴Mavo哪些應(yīng)用程序元素是重要的，即我們希望哪些元素可編輯并保存。

現(xiàn)在我們有兩個(gè)這樣的元素，它們是<p></p>元素。讓我們向這些元素添加property屬性，以告訴Mavo它們包含數(shù)據(jù)。具有property屬性的元素稱(chēng)為屬性。

我們可以將property屬性放在任何HTML5元素上，Mavo知道如何使其可編輯。例如，對(duì)于<input>，您可以編輯其內(nèi)容，但<time></time>允許您通過(guò)適當(dāng)?shù)娜掌?時(shí)間選擇器編輯其日期/時(shí)間。

您還可以通過(guò)插件擴(kuò)展這組規(guī)則，并以新的方式（例如，富文本）使元素可編輯。

請(qǐng)記住，property屬性的值應(yīng)類(lèi)似于id或class屬性那樣描述元素：

...

  <p property="source">單詞或短語(yǔ)</p>
  <p property="translation">翻譯</p>

...

如果您已經(jīng)有充分描述元素的class、id或itemprop屬性，則可以使用不帶值的property，例如property="source"。

您注意到我們的應(yīng)用程序中有什么變化嗎？頁(yè)面頂部出現(xiàn)了一個(gè)帶有編輯按鈕的Mavo工具欄。編輯按鈕允許用戶(hù)在閱讀和編輯模式之間切換。現(xiàn)在我們的應(yīng)用程序處于閱讀模式。這意味著我們無(wú)法編輯頁(yè)面上的數(shù)據(jù)。

Mavo工具欄是完全可定制的，幾乎所有由Mavo生成的UI都是如此：您可以更改其位置、刪除其默認(rèn)樣式、添加自定義按鈕元素或使用您自己的HTML元素，等等。

我們稍后在本教程中將看到一個(gè)這樣的自定義示例。

訪問(wèn)Mavo網(wǎng)站的此部分以了解更多信息。

現(xiàn)在讓我們通過(guò)單擊編輯按鈕切換到編輯模式。發(fā)生了什么變化？編輯按鈕的文本變?yōu)?strong>正在編輯，以指示我們處于編輯模式。如果您將鼠標(biāo)懸停在段落上，Mavo會(huì)通過(guò)將它們突出顯示為黃色來(lái)告知您可以單擊以編輯它們。開(kāi)始吧！單擊文本并編輯它。哇！我們可以直接在頁(yè)面上更改內(nèi)容！

假設(shè)除了單詞及其翻譯之外，抽認(rèn)卡還應(yīng)包含一個(gè)單詞在句子中用法的示例。通過(guò)向抽認(rèn)卡添加相應(yīng)的元素來(lái)增強(qiáng)應(yīng)用程序。

mv-multiple屬性

目前，我們的應(yīng)用程序中只有一個(gè)抽認(rèn)卡。這沒(méi)什么用！對(duì)于一個(gè)有效的抽認(rèn)卡應(yīng)用程序，我們需要能夠添加、刪除和重新排列抽認(rèn)卡。我們?cè)撊绾巫龅竭@一點(diǎn)？我們可以通過(guò)向代碼中添加更多<main></main>元素來(lái)創(chuàng)建更多抽認(rèn)卡，但是最終用戶(hù)如何創(chuàng)建和刪除抽認(rèn)卡呢？

幸運(yùn)的是，Mavo提供了一些使這變得輕而易舉的東西：mv-multiple屬性，它告訴Mavo某些元素可以被復(fù)制。它將其使用的元素轉(zhuǎn)換為可編輯的項(xiàng)目集合，并生成（可定制的）UI用于添加、刪除和重新排列項(xiàng)目。

如果在沒(méi)有property屬性的元素上使用mv-multiple，Mavo會(huì)自動(dòng)向其添加property="collection"（或collection2、collection3等，以便名稱(chēng)唯一）。但是，建議您也使用property屬性，為您的集合命名，并確保在HTML更改時(shí)保留其數(shù)據(jù)。

讓我們?cè)谖覀兊膽?yīng)用程序中使用mv-multiple屬性，將我們孤單的抽認(rèn)卡轉(zhuǎn)換為抽認(rèn)卡集合：

  ...    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">單詞或短語(yǔ)</p>
    <p property="translation">翻譯</p>
  </main>

也可以將屬性名稱(chēng)指定為mv-multiple的值，例如mv-multiple="flashcards"。

mv-multiple屬性位于將被復(fù)制的元素上，而不是集合的容器上。人們常常犯的一個(gè)錯(cuò)誤是使用<main mv-multiple></main>而不是<main><p mv-multiple></p></main>，并且在檢查元素或樣式使其明顯之前，通常會(huì)長(zhǎng)時(shí)間不被發(fā)現(xiàn)?，F(xiàn)在切換應(yīng)用程序到編輯模式。請(qǐng)注意，在抽認(rèn)卡下方，現(xiàn)在有一個(gè)添加抽認(rèn)卡按鈕。讓我們?cè)囈辉嚕菏褂迷摪粹o創(chuàng)建一些抽認(rèn)卡?，F(xiàn)在我們可以直接在應(yīng)用程序中動(dòng)態(tài)添加新元素，即使HTML中沒(méi)有相應(yīng)的元素。但這還不是全部！

請(qǐng)注意，<main></main>上的property屬性實(shí)際上并沒(méi)有使整個(gè)<main></main>元素可編輯，而是充當(dāng)分組元素。當(dāng)您在包含其他屬性的元素上使用property屬性時(shí)，就會(huì)發(fā)生這種情況。嘗試將鼠標(biāo)懸停在抽認(rèn)卡上，并注意出現(xiàn)在其右上角的三個(gè)按鈕，用于通過(guò)拖放句柄添加、刪除和重新排列元素。通過(guò)將鼠標(biāo)懸停在任何項(xiàng)目欄按鈕上，我們可以理解它們對(duì)應(yīng)哪個(gè)抽認(rèn)卡：Mavo會(huì)突出顯示它。是不是很神奇？

您可以自定義Mavo生成的任何UI元素，例如，您可以通過(guò)使用mv-drag-handle類(lèi)創(chuàng)建您自己的拖動(dòng)句柄。

Mavo添加到集合中每個(gè)項(xiàng)目的按鈕也可以通過(guò)鍵盤(pán)訪問(wèn)。甚至重新排序：您可以將焦點(diǎn)放在拖動(dòng)句柄上，并使用箭頭鍵移動(dòng)項(xiàng)目。

mv-storage屬性

現(xiàn)在我們已經(jīng)有了基本的UI，讓我們嘗試以下操作：

• 切換到編輯模式（如果您尚未這樣做）。
• 編輯第一個(gè)抽認(rèn)卡的源單詞和翻譯。再添加幾個(gè)抽認(rèn)卡。
• 將應(yīng)用程序切換回閱讀模式。
• 最后……刷新頁(yè)面。

什么？！我們的數(shù)據(jù)去哪兒了？Mavo不是應(yīng)該保存它嗎？發(fā)生了什么？

實(shí)際上，我們從未告訴Mavo是否或在哪里存儲(chǔ)我們的數(shù)據(jù)！

為此，我們需要使用mv-storage屬性。我們有什么選擇？好吧，Mavo為我們打開(kāi)了巨大的可能性，而Mavo插件則打開(kāi)了更多可能性！

在我們的應(yīng)用程序中，我們將數(shù)據(jù)存儲(chǔ)在瀏覽器的localStorage中，這是最簡(jiǎn)單的選項(xiàng)之一，因此它非常適合我們的第一個(gè)Mavo應(yīng)用程序。我們只需要在具有mv-app屬性的元素（也稱(chēng)為Mavo根）上添加值為local的mv-storage屬性。

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

看看Mavo工具欄。注意到什么了嗎？出現(xiàn)另一個(gè)按鈕——保存按鈕。

嘗試再次編輯應(yīng)用程序數(shù)據(jù)。請(qǐng)注意，保存按鈕現(xiàn)在已突出顯示。將鼠標(biāo)懸停在保存按鈕上，Mavo將突出顯示具有未保存數(shù)據(jù)的屬性。是不是很酷？

單擊保存按鈕并刷新頁(yè)面（無(wú)需在刷新頁(yè)面之前切換到閱讀模式）。您的數(shù)據(jù)還在嗎？太好了！我們離我們的目標(biāo)又近了一步——一個(gè)功能齊全的抽認(rèn)卡應(yīng)用程序。

mv-autosave屬性

現(xiàn)在我們每次需要保存數(shù)據(jù)時(shí)都必須單擊保存按鈕嗎？這可能更安全，可以防止破壞寶貴的數(shù)據(jù)，但這通常會(huì)很不方便。我們可以自動(dòng)保存數(shù)據(jù)嗎？當(dāng)然！為了在每次更改數(shù)據(jù)時(shí)自動(dòng)保存數(shù)據(jù)，我們可以在Mavo根元素上使用mv-autosave屬性。其值為節(jié)流保存的秒數(shù)。讓我們向應(yīng)用程序的根元素添加mv-autosave="3"：

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

如果mv-autosave="3"，Mavo最多每三秒鐘只能保存一次。這對(duì)于保留更改歷史記錄的后端（例如，GitHub、Dropbox）尤其有用，以防止洪泛，這會(huì)使該歷史記錄毫無(wú)用處。

要禁用節(jié)流并立即保存，我們可以使用mv-autosave="0"或僅使用mv-autosave，這也會(huì)從UI中刪除保存按鈕（因?yàn)樵谶@種情況下它沒(méi)有用處）。

再次更改數(shù)據(jù)并查看保存按鈕?？吹搅藛?？一開(kāi)始，它被突出顯示，但在3秒鐘后——它沒(méi)有被突出顯示。我們所有的數(shù)據(jù)現(xiàn)在都自動(dòng)保存了！

因此，現(xiàn)在我們的應(yīng)用程序的主要部分看起來(lái)像這樣：

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source">單詞或短語(yǔ)</p>
        <p property="translation">翻譯</p>
      </main>

我們幾乎完成了應(yīng)用程序的alpha版本。現(xiàn)在輪到您使應(yīng)用程序變得更好。別擔(dān)心，您擁有所需的所有知識(shí)。

增強(qiáng)應(yīng)用程序，以便抽認(rèn)卡可以由最終用戶(hù)組織到與各種主題相關(guān)的不同組中，例如，用戶(hù)可以將所有與服裝相關(guān)的抽認(rèn)卡收集到一個(gè)組中，將所有與廚房用具相關(guān)的抽認(rèn)卡收集到另一個(gè)組中，等等。

?提示！

有很多方法可以實(shí)現(xiàn)這個(gè)目標(biāo)，這取決于您決定遵循什么。但是，我希望您在繼續(xù)之前考慮一些問(wèn)題：

1. 您將使用什么HTML元素作為分組元素？如果用戶(hù)可以看到抽認(rèn)卡組的名稱(chēng)（主題名稱(chēng)）并可以將組折疊到標(biāo)題，那將很方便。
2. 您將向該元素添加哪些Mavo屬性（如果有的話）？該元素將是屬性還是集合？
3. 最終用戶(hù)能否添加新主題、刪除和重新排列它們、更改主題標(biāo)題以及在不同主題之間移動(dòng)抽認(rèn)卡？

如果您決定不按組組織抽認(rèn)卡，而是只用對(duì)應(yīng)于各種主題的標(biāo)簽標(biāo)記它們，那也沒(méi)問(wèn)題。使用標(biāo)簽的解決方案也是合適的。為了練習(xí)，也嘗試完成這種方法。

mv-bar屬性

由于我們的應(yīng)用程序在本地存儲(chǔ)數(shù)據(jù)，因此默認(rèn)情況下，應(yīng)用程序的用戶(hù)將無(wú)法與其他用戶(hù)共享他們的卡片。如果我們?cè)试S他們導(dǎo)出他們的抽認(rèn)卡和導(dǎo)入其他人的抽認(rèn)卡，那不是很好嗎？謝天謝地，這些功能已經(jīng)在Mavo中實(shí)現(xiàn)，我們可以很容易地將它們添加到我們的應(yīng)用程序中！

mv-bar屬性控制將顯示哪些按鈕（如果有的話）在工具欄中。它通常在Mavo根（具有mv-app屬性的元素）上指定。按鈕由它們的id（非常邏輯）表示：edit、import、export等。

由于我們只想向默認(rèn)集合添加幾個(gè)按鈕，因此我們可以使用所謂的相對(duì)語(yǔ)法，它允許我們向默認(rèn)集合添加和刪除按鈕，而無(wú)需顯式列出所有內(nèi)容。我們只需要以with關(guān)鍵字開(kāi)頭mv-bar屬性的值即可。

通過(guò)這樣做，我們將得到以下內(nèi)容：

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

嘗試這些功能：添加一些抽認(rèn)卡，嘗試將它們導(dǎo)出到文件中。然后刪除現(xiàn)有抽認(rèn)卡并從先前導(dǎo)出的文件中導(dǎo)入抽認(rèn)卡。

表達(dá)式和MavoScript

現(xiàn)在讓我們向我們的應(yīng)用程序添加一些統(tǒng)計(jì)信息，例如抽認(rèn)卡的數(shù)量！聽(tīng)起來(lái)很有趣嗎？我希望如此。?

為此，我們需要學(xué)習(xí)一些關(guān)于Mavo的新知識(shí)。

我們可以動(dòng)態(tài)地引用我們?cè)谌魏蔚胤蕉x的任何屬性的值在我們的Mavo應(yīng)用程序中（包括在HTML屬性中），方法是將它的名稱(chēng)放在方括號(hào)中，像這樣：[propertyName]。這是一個(gè)簡(jiǎn)單的表達(dá)式的示例，它允許我們動(dòng)態(tài)計(jì)算事物，并在它們發(fā)生變化時(shí)做出反應(yīng)。

Mavo的表達(dá)式語(yǔ)法稱(chēng)為MavoScript。它類(lèi)似于電子表格公式，允許我們執(zhí)行計(jì)算和其他操作（使用數(shù)字、文本、列表等），但旨在更易于閱讀并適應(yīng)嵌套關(guān)系。您可以在文檔中了解有關(guān)Mavo表達(dá)式和MavoScript的更多信息。

現(xiàn)在讓我們嘗試一下，在抽認(rèn)卡屬性內(nèi)部添加[source]表達(dá)式，例如，在兩個(gè)屬性之間：源和翻譯。

...
  <p property="source">單詞或短語(yǔ)</p>
  [source]
  <p property="translation">翻譯</p>
...

我們的應(yīng)用程序發(fā)生了什么變化？抽認(rèn)卡源屬性的值現(xiàn)在在頁(yè)面上顯示了兩次。

切換到編輯模式并嘗試更改源屬性的值。您看到了嗎？在您更改屬性值時(shí)，頁(yè)面內(nèi)容會(huì)更新！這就是我之前說(shuō)Mavo允許我們開(kāi)發(fā)響應(yīng)式Web應(yīng)用程序的原因。

這確實(shí)很酷，但不幸的是，在我們的例子中，它并沒(méi)有什么用處：我們無(wú)法使用此表達(dá)式來(lái)計(jì)算抽認(rèn)卡的數(shù)量——我們總是只有一個(gè)值。

如果我們將[source]表達(dá)式放在抽認(rèn)卡屬性外部會(huì)怎樣？我們將得到如下內(nèi)容：

...
  [source]

    ...

...

這與之前的案例有何不同？要查看差異，如果您尚未這樣做，請(qǐng)?zhí)砑右恍┏檎J(rèn)卡?，F(xiàn)在，我們不是一個(gè)值，而是一個(gè)逗號(hào)分隔的值列表：所有抽認(rèn)卡的源屬性。這正是我們一直在尋找的：列表中項(xiàng)目的數(shù)量對(duì)應(yīng)于應(yīng)用程序中抽認(rèn)卡的數(shù)量。

說(shuō)得通嗎？是的，但是如果我們計(jì)算抽認(rèn)卡的數(shù)量，而不是其源屬性的值的數(shù)量，豈不是更合乎邏輯？畢竟，即使在我們填寫(xiě)其源或翻譯之前，添加的抽認(rèn)卡也存在。我建議您執(zhí)行以下操作：讓我們用[flashcard]替換[source]表達(dá)式：

...
  [flashcard]

    ...

...

注意到區(qū)別了嗎？我們?nèi)匀挥幸粋€(gè)列表，但其值不是簡(jiǎn)單值，而是對(duì)象，即包含與每個(gè)抽認(rèn)卡相關(guān)的所有數(shù)據(jù)的復(fù)雜值。好消息是這些對(duì)象的數(shù)目等于抽認(rèn)卡的數(shù)目，因?yàn)槊總€(gè)抽認(rèn)卡都有一個(gè)，即使它完全為空。所以，現(xiàn)在我們每個(gè)抽認(rèn)卡都有一個(gè)對(duì)象，但是我們?nèi)绾斡?jì)算它們并顯示總數(shù)呢？

現(xiàn)在讓我們熟悉MavoScript函數(shù)，并找到可以讓我們計(jì)算抽認(rèn)卡數(shù)量的函數(shù)。記住，我們有一個(gè)抽認(rèn)卡列表，所以我們需要找到一個(gè)可以讓我們計(jì)算列表中項(xiàng)目數(shù)量的函數(shù)。它來(lái)了——count()函數(shù)就是這樣做的！

但是我們?nèi)绾卧诒磉_(dá)式中使用函數(shù)呢？我們需要注意哪些規(guī)則？是的，有幾個(gè)：

1. 表達(dá)式用方括號(hào)表示。
2. 不要嵌套括號(hào)。

讓我們嘗試使用count()函數(shù)來(lái)計(jì)算抽認(rèn)卡的數(shù)量：

...
[count(flashcard)]

  ...

...

這正是我們所追求的——現(xiàn)在我們的應(yīng)用程序中有一些統(tǒng)計(jì)數(shù)據(jù)了！是不是很酷？

我希望您已經(jīng)熱身并準(zhǔn)備好繼續(xù)嘗試Mavo了。

改進(jìn)應(yīng)用程序，以便不僅顯示應(yīng)用程序中抽認(rèn)卡的總數(shù)的統(tǒng)計(jì)信息，而且還顯示每個(gè)主題中抽認(rèn)卡的數(shù)量的統(tǒng)計(jì)信息（如果有的話）。

?提示！
想要根據(jù)某些條件過(guò)濾列表嗎？where運(yùn)算符將有所幫助。

自我評(píng)估功能

我們已經(jīng)有一個(gè)應(yīng)用程序，可以讓我們創(chuàng)建、編輯和存儲(chǔ)多個(gè)抽認(rèn)卡。但是我們?nèi)绾胃櫸覀円呀?jīng)學(xué)習(xí)了哪些抽認(rèn)卡，以及哪些抽認(rèn)卡需要更多練習(xí)呢？任何值得尊敬的抽認(rèn)卡應(yīng)用程序都需要自我評(píng)估功能。讓我們研究一下我們?nèi)绾翁砑铀?/p>

假設(shè)在我們的應(yīng)用程序中，我們有兩個(gè)用于自我評(píng)估的按鈕：差和好。我們希望每次最終用戶(hù)單擊按鈕時(shí)會(huì)發(fā)生什么？好吧，這個(gè)想法很簡(jiǎn)單：

• 單擊“差”按鈕將表示用戶(hù)尚未學(xué)習(xí)該單詞，我們希望我們的應(yīng)用程序?qū)⑾鄳?yīng)的抽認(rèn)卡移動(dòng)到列表的開(kāi)頭，以便他們可以在啟動(dòng)應(yīng)用程序后盡快看到它。
• 單擊“好”按鈕將表示用戶(hù)已經(jīng)學(xué)習(xí)了該單詞，相應(yīng)的抽認(rèn)卡需要移動(dòng)到列表的末尾，讓他們使用他們尚未學(xué)習(xí)的其他抽認(rèn)卡。

“您確定我們可以在沒(méi)有JavaScript的情況下做到這一點(diǎn)嗎？” 你可能會(huì)問(wèn)。是的！Mavo非常強(qiáng)大，能夠?yàn)槲覀兲峁┧璧乃泄ぞ撸?/p>

現(xiàn)在我們知道了我們將要實(shí)現(xiàn)的內(nèi)容，讓我們首先設(shè)置UI，然后繼續(xù)下一步。我們的標(biāo)記看起來(lái)像這樣：

...

  ...
  <h2>評(píng)估自己</h2>
    <button>差</button>
    <button>好</button>


...

mv-action屬性

Mavo操作允許我們創(chuàng)建我們自己的控件，這些控件以自定義方式修改數(shù)據(jù)，當(dāng)用戶(hù)與它們交互時(shí)。聽(tīng)起來(lái)很有希望，對(duì)吧？

要定義自定義操作，我們需要在Mavo應(yīng)用程序內(nèi)的相應(yīng)元素上使用mv-action屬性。每次單擊該元素時(shí)都會(huì)執(zhí)行該操作。這正是我們一直在尋找的。

對(duì)于<form></form>元素，當(dāng)表單提交時(shí)會(huì)執(zhí)行自定義操作。mv-action屬性的值是一個(gè)表達(dá)式。我們可以使用MavoScript為我們提供的任何表達(dá)式函數(shù)和語(yǔ)法，以及一些其他函數(shù)來(lái)促進(jìn)數(shù)據(jù)操作，例如add()、set()、move()或delete()。重要的是要注意，與以反應(yīng)方式計(jì)算的普通表達(dá)式不同，這些表達(dá)式僅在每次觸發(fā)操作時(shí)才計(jì)算。

Mavo期望mv-action屬性的值是一個(gè)表達(dá)式，因此無(wú)需將其括在括號(hào)中：mv-action="expression"。此外，如果我們包含它們，它們將被視為表達(dá)式的部分。

因此，我們需要移動(dòng)集合內(nèi)的抽認(rèn)卡，而Mavo有一個(gè)合適的函數(shù)可以讓我們做到這一點(diǎn)——move()函數(shù)。它的第一個(gè)參數(shù)指的是我們正在移動(dòng)的項(xiàng)目，第二個(gè)參數(shù)是它在集合中的位置。請(qǐng)記住，集合的元素從0開(kāi)始編號(hào)。

想要了解有關(guān)move函數(shù)（及其變體）以及自定義操作的更多信息，請(qǐng)參閱文檔。

讓我們實(shí)現(xiàn)我們前面討論的大綱的第一點(diǎn)：在自我評(píng)估時(shí)，最終用戶(hù)單擊“差”按鈕，相應(yīng)的抽認(rèn)卡將移動(dòng)到集合的開(kāi)頭，即成為第一個(gè)。所以在代碼中，我們有：

...

  ...
  <button mv-action="move(this, 0)">差</button>
  ...

...

請(qǐng)注意，在mv-action屬性中，我們?cè)趯傩?strong>內(nèi)部引用抽認(rèn)卡屬性，因?yàn)槲覀兿Ｍ幚?strong>當(dāng)前抽認(rèn)卡。

如果我們嘗試實(shí)現(xiàn)大綱的第二點(diǎn)，我們將面臨一個(gè)問(wèn)題。您能否建議這究竟是什么問(wèn)題？

讓我們記住，如果最終用戶(hù)單擊“好”按鈕，相應(yīng)的抽認(rèn)卡將移動(dòng)到集合的末尾，即成為最后一個(gè)。為了使抽認(rèn)卡成為集合中的最后一個(gè)，我們需要知道集合中項(xiàng)目的數(shù)量。

謝天謝地，我們之前已經(jīng)解決了這項(xiàng)任務(wù)并實(shí)現(xiàn)了相應(yīng)的功能。但是我們能否使用該解決方案來(lái)解決我們當(dāng)前的問(wèn)題呢？不幸的是，我們不能：正如我們已經(jīng)知道的，我們只能在抽認(rèn)卡屬性外部引用抽認(rèn)卡的集合（并評(píng)估其大?。?。但在我們的例子中，我們需要在其中進(jìn)行：我們需要為其編寫(xiě)表達(dá)式的“好”按鈕在抽認(rèn)卡屬性?xún)?nèi)部。

那我們?cè)撛趺崔k呢？我很高興你問(wèn)。Mavo有解決方案。

使用元元素保存中間值

因此，一方面，我們知道[count(flashcards)]表達(dá)式會(huì)在外部評(píng)估抽認(rèn)卡屬性時(shí)為我們提供抽認(rèn)卡的數(shù)量。另一方面，我們需要在其中使用該值抽認(rèn)卡屬性。

為了解決這個(gè)難題，我們需要在我們的代碼中評(píng)估抽認(rèn)卡的數(shù)量，并以某種方式保存結(jié)果，以便能夠在應(yīng)用程序的其他地方使用它，準(zhǔn)確地說(shuō)是在抽認(rèn)卡屬性?xún)?nèi)部。對(duì)于這種情況，在Mavo中，有所謂的計(jì)算屬性。

為了保存中間結(jié)果以便我們可以引用它，我們需要代碼中的HTML元素。建議為此使用<meta>元素，如下所示：<meta content="[expression]" property="propertyName">。使用此元素的優(yōu)點(diǎn)是它在編輯模式外部是隱藏的，在語(yǔ)義上和視覺(jué)上都是如此。

請(qǐng)記住，默認(rèn)情況下不會(huì)保存計(jì)算屬性。

現(xiàn)在讓我們?cè)谖覀兊膽?yīng)用程序中添加flashcardCount計(jì)算屬性。記住，我們必須將其放在抽認(rèn)卡屬性外部，但是然后我們可以從任何地方引用它：

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

...

只剩下一個(gè)步驟來(lái)完成自我評(píng)估功能的實(shí)現(xiàn)：如果最終用戶(hù)單擊“好”按鈕，相應(yīng)的抽認(rèn)卡將移動(dòng)到集合的末尾，即成為最后一個(gè)。讓我們?cè)趹?yīng)用程序的代碼中添加相關(guān)的操作：

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

...

我們完成了！恭喜！?

還有另一種解決該任務(wù)的方法：借助$all特殊屬性。如果$all屬性位于集合內(nèi)部，則它代表集合本身。因此，在這種情況下無(wú)需使用任何計(jì)算屬性。嘗試自己實(shí)現(xiàn)該解決方案。

只剩下最后一件事我們需要修復(fù)。還記得我們向應(yīng)用程序添加了一些統(tǒng)計(jì)數(shù)據(jù)的部分嗎？還記得我們構(gòu)建的用于評(píng)估應(yīng)用程序中抽認(rèn)卡數(shù)量的表達(dá)式嗎：[count(flashcard)]？相反，我們現(xiàn)在可以使用（也應(yīng)該使用）我們定義的計(jì)算屬性。在應(yīng)用程序中進(jìn)行相應(yīng)的更改。

結(jié)論

那么到目前為止我們學(xué)習(xí)了什么呢？讓我們回顧一下。為了將任何靜態(tài)HTML頁(yè)面轉(zhuǎn)換為Mavo應(yīng)用程序，我們需要：

1. 在頁(yè)面的部分包含Mavo JavaScript和CSS文件。
2. 向Mavo根元素添加mv-app屬性。
3. 通過(guò)向它們添加property屬性來(lái)告訴Mavo我們的應(yīng)用程序的哪些元素是重要的。
4. 將mv-multiple屬性放在將被復(fù)制并轉(zhuǎn)換為集合的元素上。
5. 通過(guò)向Mavo根添加mv-storage屬性來(lái)告訴Mavo在哪里存儲(chǔ)我們的數(shù)據(jù)。
6. 決定Mavo是否應(yīng)該自動(dòng)保存我們的數(shù)據(jù)。如果是，則向Mavo根添加mv-autosave屬性。我們還知道：
7. Mavo工具欄是完全可定制的。mv-bar屬性控制將顯示哪些按鈕。
8. 表達(dá)式允許我們?cè)谄渌刂酗@示屬性的當(dāng)前值并執(zhí)行計(jì)算。表達(dá)式的值（和類(lèi)型）取決于表達(dá)式在代碼中所處的位置。Mavo的表達(dá)式語(yǔ)法稱(chēng)為MavoScript。
9. 自定義操作允許創(chuàng)建以自定義方式修改數(shù)據(jù)的控件。要在Mavo應(yīng)用程序內(nèi)的相應(yīng)元素上定義自定義操作，請(qǐng)?jiān)O(shè)置mv-action屬性。
10. 值為表達(dá)式的屬性稱(chēng)為計(jì)算屬性。為了保存中間結(jié)果以便能夠在應(yīng)用程序的其他地方引用它，建議使用<meta>元素。

后記

所以我們構(gòu)建了我們的應(yīng)用程序。它已經(jīng)完美了嗎？當(dāng)然不是，沒(méi)有什么東西是完美的！有很多東西可以改進(jìn)，還有很多功能可以添加（在Mavo的幫助下，我們甚至可以使我們的應(yīng)用程序多語(yǔ)言化！）。繼續(xù)，進(jìn)一步增強(qiáng)它，不要猶豫嘗試新的東西！

到目前為止，我們對(duì)Mavo的了解只是冰山一角，還有很多東西。我鼓勵(lì)您仔細(xì)閱讀文檔，檢查示例（在Mavo網(wǎng)站上，或在CodePen上：由Lea Verou制作和一些由我自己制作），并創(chuàng)建新內(nèi)容！祝你好運(yùn)！?

致謝

我要感謝兩位偉大的人。首先，我要衷心感謝Lea Verou，她不僅激勵(lì)我撰寫(xiě)本教程（并幫助我實(shí)現(xiàn)它），而且還一直激勵(lì)我，她使Web開(kāi)發(fā)世界變得更美好。我從未見(jiàn)過(guò)如此有天賦的人，我很高興有機(jī)會(huì)和她一起做一些事情！

我還感謝James Moore。他在Udemy上的“JavaScript初學(xué)者函數(shù)式編程”課程中使用的示例促使我制作我自己的抽認(rèn)卡學(xué)習(xí)應(yīng)用程序版本。他是一位很棒的老師！

以上是讓Mavo在構(gòu)建交互式Web應(yīng)用程序中發(fā)光的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！