대화식 웹 응용 프로그램을 구축하는 데 Mavo가 빛나게하십시오

이 튜토리얼은 JavaScript 코드 또는 서버 백엔드 라인없이 HTML 및 CSS를 작성하여 복잡하고 반응이 좋고 지속적인 웹 애플리케이션을 작성하는 편리하고 사용하기 쉬운 방법 인 Mavo로 뛰어납니다.

Mavo는 MIT의 CSAIL의 Haystack Group에 의해 개발되었으며 Lea Verou가 이끌었습니다.

우리는 외국어 학습을위한 플래시 카드 응용 프로그램을 공동으로 구축 할 것입니다. 이것은 다음을 수행 할 수있는 완전히 기능적인 CRUD 응용 프로그램입니다.

• 플래시 카드를 작성, 삭제, 업데이트하고 드래그 앤 드롭으로 재 배열하십시오.
• 수입 및 내보내기 플래시 카드.
• 플래시 카드에서 단어의 숙달 수준을 평가하십시오.

우리가 완료 한 응용 프로그램은 다음과 같습니다.

이 튜토리얼에서는 응용 프로그램 구축의 전체 과정을 안내해 드리겠습니다.

몇 단계가 끝나면 Mavo를 사용해 보시기 위해 조언을 해 드리겠습니다. 자세히 알아보십시오.

준비가 된? 시작합시다! ?

정적 템플릿

Mavo가 표준 HTML을 향상시키는 방법을 설명하기 위해 먼저 순수한 정적 HTML 페이지를 작성한 다음 Mavo를 사용 하여이 정적 HTML을 완전히 기능하는 웹 애플리케이션으로 변환합니다.

다음 HTML 코드에 있다고 가정합니다.

<h1 id="플래시-카드"> 플래시 카드</h1>
<main><p>단어 또는 문구</p>
  <p>번역하다</p>
</main>

이 코드에서<main></main> 요소는 단일 플래시 카드를 나타냅니다.

HTML을 실제 플래시 카드 응용 프로그램처럼 보이게하기 위해 스타일을 추가합시다. 소스 코드를보고 여기에서 사용할 수 있습니다.

Mavo로 시작하십시오

이제 정적 템플릿 만 있습니다. 이제 플래시 카드 앱처럼 작동 할 수 있도록 기능을 추가해야합니다. Mavo는 훌륭한 데뷔를합니다!

Mavo를 사용하려면 먼저 필요합니다 JavaScript 및 CSS 파일을 부분적으로 포함합니다.

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

이전 브라우저를 지원해야 할 수도 있고 코드를 읽을 수 있습니까? 몇 가지 질문에 대답하여 사용중인 버전을 사용자 정의하고 빌드 할 수 있습니다.

Mavo 응용 프로그램을 정의하십시오

HTML 구조에서 Mavo 기능을 활성화하려면 Mavo 응용 프로그램이 포함 된 요소의 mv-app 속성을 사용해야합니다 ( 또는 요소, 모두 괜찮습니다! ). 그 값은 응용 프로그램의 ID이며 페이지에서 고유해야합니다. 값이없는 <code>mv-app 사용하고 동일한 요소에 id 또는 name 속성이 없으면 mavo1 , mavo2 등과 같은 이름이 자동으로 생성됩니다.

그러나 이름이 여러 곳에서 사용되므로 Mavo 응용 프로그램의 이름을 지정하는 것이 좋습니다.

고려하다<main></main> 이 요소는 Mavo 응용 프로그램을 나타내고 mv-app 속성을 추가하고 응용 프로그램에 ID "FlashCards"를 지정하겠습니다.

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

속성 속성

이제 Mavo에게 어떤 응용 프로그램 요소가 중요한지 , 즉 우리가 편집 할 수 있고 저장하려는 요소를 알려야합니다.

이제 우리는 두 가지 요소를 가지고 있습니다<p> 요소. 이러한 요소에 <code>property 속성을 추가하여 Mavo에게 데이터가 포함되어 있다고 알려주겠습니다. property 속성이있는 요소를 속성 이라고합니다.

우리는 HTML5 요소 에 property 속성을 넣을 수 있으며 Mavo는 편집 가능한 방법을 알고 있습니다. 예를 들어,<input> , 당신은 그 내용을 편집 할 수 있지만<time></time> 해당 날짜/시간 선택기로 날짜/시간을 편집 할 수 있습니다.

플러그인을 통해이 규칙 세트를 확장하고 새로운 방식으로 요소를 편집 할 수 있습니다 (예 : 리치 텍스트).

property 속성의 값은 id 또는 class 속성과 유사한 요소를 설명해야합니다.

 ...

  <p property="source">단어 또는 문구</p>
  <p property="translation">번역하다</p>

...

요소를 완전히 설명하는 class , id 또는 itemprop 속성이 이미있는 경우 property="source" 와 같은 값없이 property 사용할 수 있습니다.

응용 프로그램의 변경 사항이 있습니까? 편집 버튼이있는 Mavo 도구 모음이 페이지 상단에 나타납니다. 편집 버튼을 사용하면 사용자가 읽기 및 편집 모드간에 전환 할 수 있습니다. 이제 응용 프로그램은 읽기 모드에 있습니다. 즉, 페이지에서 데이터를 편집 할 수 없습니다.

Mavo 도구 모음은 완전히 사용자 정의 할 수 있으며 Mavo에서 생성 한 거의 모든 UI가 있습니다. 위치를 변경하거나 기본 스타일을 삭제하거나 사용자 정의 버튼 요소를 추가하거나 HTML 요소를 사용할 수 있습니다.

이 튜토리얼의 뒷부분에서 이와 같은 맞춤형 예제를 볼 수 있습니다.

자세한 내용은 Mavo 웹 사이트 의이 섹션을 방문하십시오.

이제 편집 버튼을 클릭하여 편집 모드로 전환하겠습니다. 무엇이 바뀌 었습니까? 편집 버튼의 텍스트가 편집 모드에 있음을 나타 냅니다 . 단락으로 마우스를 떠나면 Mavo는 클릭하여 노란색으로 강조하여 편집 할 수 있다고 알려줍니다. 시작합시다! 텍스트를 클릭하고 편집하십시오. 우와! 우리는 페이지에서 직접 콘텐츠를 변경할 수 있습니다!

단어와 번역 외에도 플래시 카드에는 단어가 문장에서 어떻게 사용되는지에 대한 예를 포함해야한다고 가정하십시오. 플래시 카드에 해당 요소를 추가하여 응용 프로그램을 향상시킵니다.

mv-multiple 속성

현재 응용 프로그램에는 플래시 카드가 하나뿐입니다. 이것은 쓸모가 없습니다! 효과적인 플래시 카드 응용 프로그램의 경우 플래시 카드를 추가, 삭제 및 재 배열 할 수 있어야합니다. 어떻게해야합니까? 코드에 더 많은 것을 추가 할 수 있습니다<main></main> 더 많은 플래시 카드를 생성하는 요소이지만 최종 사용자는 플래시 카드를 어떻게 생성하고 삭제합니까?

다행스럽게도 Mavo는이를 mv-multiple 바람 으로 만드는 무언가를 제공합니다. 사용하는 요소를 편집 가능한 항목 컬렉션 으로 변환하고 항목 추가, 삭제 및 재배치하기 위해 (사용자 정의 가능한) UI를 생성합니다 (사용자 정의 가능) UI.

property 속성이없는 요소에서 mv-multiple 사용하는 경우 Mavo는 자동으로 property="collection" 추가하여 (또는 collection2 , collection3 등을 독특하게 만듭니다). 그러나 property 속성을 사용하고 컬렉션의 이름을 지정하고 HTML을 변경하여 데이터를 보존하는 것이 좋습니다.

응용 프로그램의 mv-multiple 속성을 사용하여 외로운 플래시 카드를 플래시 카드 컬렉션으로 변환합시다.

 ...    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">단어 또는 문구</p>
    <p property="translation">번역하다</p>
  </main>

mv-multiple="flashcards" 와 같은 MV- mv-multiple 의 값으로 속성 이름을 지정할 수도 있습니다.

mv-multiple 컬렉션의 컨테이너가 아닌 복사 할 요소에 있습니다. 사람들이하는 실수 중 하나는 사용하는 것입니다.<main mv-multiple></main> 대신에<main></main>

, 그리고 일반적으로 요소 나 스타일을 확인하기 전에 오랫동안 발견되지 않았습니다. 이제 응용 프로그램을 편집 모드로 전환하십시오. 플래시 카드에는 이제 플래시 카드 추가 버튼이 있습니다. 시도해 봅시다 :이 버튼을 사용하여 플래시 카드를 만듭니다. 이제 HTML에 해당 요소가 없더라도 응용 프로그램에서 새 요소를 직접 동적으로 추가 할 수 있습니다. 그러나 그게 전부는 아닙니다!

주목하십시오<main></main> 속성의 property 은 실제로 전체를 만들지 않습니다.<main></main> 요소는 편집 가능하지만 대신 그룹화 요소 역할을합니다. 이것은 다른 속성을 포함하는 요소에서 property 속성을 사용하는 경우에 발생합니다. 마우스를 플래시 카드 위로 호버링하고 오른쪽 상단에 나타나는 세 개의 버튼에주의를 기울여 드래그 앤 드롭 핸들로 요소를 추가 , 삭제 및 재 배열하십시오 . 항목 막대 버튼 위로 마우스를 가져 가면 다음과 같은 플래시 카드를 이해할 수 있습니다. Mavo가 강조 표시됩니다. 마법이 아닌가?

예를 들어 Mavo가 생성 한 UI 요소를 사용자 정의 할 수 있습니다. 예를 들어 mv-drag-handle 클래스를 사용하여 자신의 드래그 핸들을 만들 수 있습니다.

컬렉션의 각 항목에 추가 된 버튼도 키보드를 통해 액세스 할 수 있습니다 . 재주문조차도 : 드래그 핸들에 집중하고 화살표 키를 사용하여 항목을 이동할 수 있습니다.

mv-storage 속성

이제 기본 UI가 있으므로 다음을 시도해 봅시다.

• 편집 모드로 전환하십시오 (아직 그렇게하지 않은 경우).
• 첫 번째 플래시 카드의 소스 단어와 번역을 편집하십시오. 플래시 카드 몇 개를 추가하십시오.
• 응용 프로그램을 읽기 모드로 다시 전환하십시오.
• 마지막으로 ... 페이지를 새로 고칩니다.

무엇? ! 우리의 데이터는 어디로 갔습니까? Mavo가 저장해서는 안됩니까? 무슨 일이에요?

사실, 우리는 Mavo에게 데이터를 어디에 보관할 것인지 어디에 보관할 것인지에 대해 말하지 않았습니다!

이를 위해서는 mv-storage 속성을 사용해야합니다. 우리는 어떤 선택을 가지고 있습니까? 글쎄, Mavo는 우리에게 큰 가능성을 열어주고 Mavo 플러그인은 더 많은 가능성을 열어줍니다!

응용 프로그램에서 우리는 가장 쉬운 옵션 중 하나 인 브라우저의 로컬 스토리지에 데이터를 저장하므로 첫 번째 Mavo 응용 프로그램에 적합합니다. 요소 ( Mavo Root 라고도 함)의 local 으로 mv-storage mv-app 추가하면됩니다.

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

Mavo 도구 모음을 살펴보십시오. 뭔가 알아 차렸어? 다른 버튼이 나타납니다 - 저장 버튼.

응용 프로그램 데이터를 다시 편집 해보십시오. 이제 저장 버튼이 강조 표시됩니다. 저장 버튼 위로 마우스를 가져 가면 Mavo는 구원받지 않은 데이터 로 속성을 강조 표시합니다. 시원하지 않습니까?

저장 버튼을 클릭하고 페이지를 새로 고치십시오 (페이지를 새로 고치기 전에 읽기 모드로 전환 할 필요가 없습니다). 당신의 데이터는 아직 거기에 있습니까? 매우 좋은! 우리는 우리의 목표에 한 걸음 더 가까워졌습니다-완전한 기능 플래시 카드 응용 프로그램.

mv-autosave 특성

이제 데이터를 저장해야 할 때마다 저장 버튼을 클릭해야합니까? 이것은 더 안전하고 귀중한 데이터가 손상되는 것을 방지 할 수 있지만 종종 불편할 수 있습니다. 데이터를 자동으로 저장할 수 있습니까? 틀림없이! 변경할 때마다 데이터를 자동으로 저장하려면 Mavo 루트 요소의 mv-autosave 속성을 사용할 수 있습니다. 그 가치는 스로틀링으로 저장된 초 수입니다. 응용 프로그램의 루트 요소에 mv-autosave="3" 을 추가하겠습니다.

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

mv-autosave="3" 인 경우 Mavo는 최대 3 초마다 한 번만 저장할 수 있습니다. 이것은 홍수를 방지하기 위해 변화 역사 (예 : Github , Dropbox )를 유지하는 백엔드에 특히 유용하며, 이는 그 역사를 쓸모가 없게 만듭니다.

스로틀링을 비활성화하고 즉시 저장하려면 mv-autosave="0" 사용하거나 mv-autosave 만 사용할 수 있으며 UI에서 저장 버튼을 제거합니다 (이 경우에는 쓸모 없기 때문에).

데이터를 다시 변경하고 저장 버튼을 봅니다. 당신은 그것을 보셨습니까? 처음에는 강조되었지만 3 초 후에는 강조되지 않았습니다. 모든 데이터가 자동으로 저장되었습니다!

이제 응용 프로그램의 주요 부분은 다음과 같습니다.

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source"> 단어 또는 문구</p>
        <p property="translation">번역하다</p>
      </main>

우리는 응용 프로그램의 알파 버전을 거의 완료했습니다. 이제 앱을 개선 할 차례입니다. 걱정하지 마십시오. 필요한 모든 지식이 있습니다.

예를 들어, 사용자는 모든 의류 관련 플래시 카드를 하나의 그룹으로, 모든 주방기구를 다른 그룹으로 수집 할 수있는 다양한 주제와 관련된 다른 그룹으로 플래시 카드를 최종 사용자로 구성 할 수 있도록 응용 프로그램을 향상시킵니다.

?힌트!

따르기로 결정한 것에 따라이를 달성하는 방법에는 여러 가지가 있습니다. 그러나 진행하기 전에 몇 가지 문제에 대해 생각하기를 바랍니다.

1. 그룹화 요소 로 어떤 HTML 요소를 사용 하시겠습니까? 사용자가 플래시 데크 (테마 이름)의 이름을 볼 수 있고 그룹을 제목으로 무너 뜨릴 수 있다면 편리합니다.
2. 해당 요소에 어떤 Mavo 속성을 추가 하시겠습니까? 이 요소가 속성 입니까 아니면 컬렉션 입니까?
3. 최종 사용자는 새로운 주제를 추가하고, 삭제 및 재 배열하고, 주제 제목을 변경하고, 주제간에 플래시 카드를 이동할 수 있습니까?

그룹 별 플래시 카드를 구성하지 않기로 결정했지만 대신 다양한 주제에 해당하는 레이블 로 태그를 지정하면 괜찮습니다. 태그를 사용하는 솔루션도 적합합니다. 연습을 위해이 방법을 완성하십시오.

mv-bar 속성

앱은 기본적으로 데이터를 로컬로 저장하기 때문에 앱 사용자는 다른 사용자와 카드를 공유 할 수 없습니다. 그들이 플래시 카드를 내보내고 다른 사람들의 플래시 카드를 가져 오도록 허용한다면 좋지 않습니까? 고맙게도 이러한 기능은 이미 Mavo에서 구현되었으며 앱에 쉽게 추가 할 수 있습니다!

mv-bar 속성 컨트롤은 툴바에 어떤 버튼 (있는 경우)이 표시됩니다. 일반적으로 Mavo 루트 ( mv-app 속성이있는 요소)에 지정됩니다. 버튼은 ID (매우 논리적)로 표시됩니다 (편집, 가져 오기, 내보내기 등).

기본 컬렉션에 몇 개의 버튼 만 추가하려면 상대 구문 이라는 것을 사용할 수있어 모든 것을 명시 적으로 나열하지 않고도 기본 컬렉션에 버튼을 추가하고 삭제할 수 있습니다. Keyword with 시작하면 mv-bar 속성의 값을 시작해야합니다.

이렇게하면 다음을 얻을 수 있습니다.

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

이러한 기능을 시도하십시오. 플래시 카드를 추가하고 파일로 내보내십시오. 그런 다음 기존 플래시 카드를 삭제하고 이전에 내보낸 파일에서 플래시 카드를 가져옵니다.

표현 및 mavoscript

이제 플래시 카드 수와 같은 앱에 통계를 추가하겠습니다! 흥미롭게 들립니까? 나는 그렇게 희망한다. ?

이를 위해서는 Mavo에 대해 새로운 것을 배워야합니다.

우리는 Mavo 응용 프로그램 (HTML 속성 포함)의 어느 곳에서나 정사각형 괄호 안에 다음과 같은 사각형 괄호 안에 정의하는 속성의 값을 동적으로 참조 할 수 있습니다. [propertyName] . 다음은 사물을 동적으로 계산하고 변경할 때 반응 할 수있는 간단한 표현 의 예입니다.

Mavo의 Expression Syntax를 Mavoscript 라고합니다. 스프레드 시트 공식과 유사하므로 계산 및 기타 작업 (숫자, 텍스트, 목록 등 사용)을 수행 할 수 있지만 중첩 된 관계에 쉽게 읽고 적응할 수 있도록 설계되었습니다. 문서에서 Mavo Expressions 및 Mavoscript에 대해 자세히 알아볼 수 있습니다.

이제 시도해 봅시다. 예를 들어 두 가지 속성 사이에 플래시 카드 속성 안에 [source] 표현식을 추가하겠습니다 : 소스와 번역.

 ...
  <p property="source">단어 또는 문구</p>
  [원천]
  <p property="translation">번역하다</p>
...

응용 프로그램에서 무엇이 변경 되었습니까? 플래시 카드 소스 속성의 값은 이제 페이지에 두 번 표시됩니다.

편집 모드로 전환하고 소스 속성의 값을 변경하십시오. 당신은 그것을 보셨습니까? 속성 값을 변경하면 페이지 컨텐츠가 업데이트됩니다! 이것이 바로 전에 Mavo가 반응 형 웹 응용 프로그램을 개발할 수 있다고 말한 이유입니다.

이것은 정말 멋지지만 불행히도 우리의 경우에는별로 작동하지 않습니다.이 표현식을 사용하여 플래시 카드 수를 계산할 수 없습니다. 항상 하나의 값 만 있습니다.

[source] 표현식을 플래시 카드 속성 외부에 넣으면 어떻게됩니까? 우리는 다음을 얻을 것입니다.

 ...
  [원천]

    ...

...

이것이 이전의 경우와 어떻게 다릅니 까? 차이점을 보려면 그렇게하지 않은 경우 플래시 카드를 추가하십시오. 이제 우리는 값이 아니라 쉼표로 구분 된 값 목록입니다 : 모든 플래시 카드의 소스 속성. 이것이 바로 우리가 항상 찾고있는 것입니다. 목록의 항목 수는 앱의 플래시 카드 수에 해당합니다.

의미가 있습니까? 예, 그러나 소스 속성 값 수보다 플래시 카드 수를 계산하면 더 논리적이지 않습니까? 결국, 추가 된 플래시 카드는 소스 나 번역을 작성하기 전에도 존재합니다. 다음을 수행하는 것이 좋습니다. [source] 표현식을 [flashcard] 로 바꾸겠습니다.

 ...
  [플래시 카드]

    ...

...

차이를 알아 차렸습니까? 우리는 여전히 목록이 있지만 그 값은 단순한 값이 아니라 객체 , 즉 각 플래시 카드와 관련된 모든 데이터를 포함하는 복잡한 값입니다. 좋은 소식은 이러한 객체의 수는 플래시 카드 수와 같다는 것입니다. 각 플래시 카드는 완전히 비어 있더라도 하나가 있기 때문입니다. 이제 각 플래시 카드에 대한 객체가 있지만 어떻게 계산하고 총계를 표시합니까?

이제 mavoscript 함수에 익숙해지고 플래시 카드 수를 계산할 수있는 함수를 찾으십시오. 플래시 카드 목록이 있으므로 목록의 항목 수를 계산할 수있는 함수를 찾아야합니다. 여기에 있습니다 - 이것은 count() 함수가 수행하는 방식입니다!

그러나 표현식에서 기능을 어떻게 사용합니까? 우리는 어떤 규칙에주의를 기울여야합니까? 예, 여러 가지가 있습니다.

1. 표현은 정사각형 괄호로 표시됩니다.
2. 브래킷을 중첩하지 마십시오.

count() 함수를 사용하여 플래시 카드 수를 계산해 보겠습니다.

 ...
[카운트 (플래시 카드)]

  ...

...

그것이 바로 우리가 뒤 따르는 것입니다. 이제 앱에 몇 가지 통계가 있습니다! 시원하지 않습니까?

나는 당신이 따뜻해지고 Mavo를 계속 시도 할 준비가 되었기를 바랍니다.

응용 프로그램을 개선하여 응용 프로그램의 총 플래시 카드 수에 대한 통계를 표시 할뿐만 아니라 각 주제의 플래시 카드 수에 대한 통계도 표시됩니다.

?힌트!
특정 기준에 따라 목록을 필터링하고 싶으십니까? 운영자가 도움이 될 where .

자기 평가 기능

우리는 이미 여러 플래시 카드를 생성, 편집 및 저장할 수있는 응용 프로그램이 있습니다. 그러나 우리가 배운 플래시 카드와 어떤 플래시 카드가 더 많은 연습이 필요한지 어떻게 추적합니까? 존경받는 플래시 카드 응용 프로그램에는 자체 평가 기능이 필요합니다. 우리가 어떻게 추가하는지 살펴 보겠습니다!

응용 프로그램에 자체 평가를위한 두 개의 버튼이 있다고 가정합니다. 최종 사용자가 버튼을 클릭 할 때마다 어떤 일이 발생하고 싶습니까? 글쎄,이 아이디어는 간단합니다.

• "열악한"버튼을 클릭하면 사용자가 아직 단어를 배우지 않았으며 앱을 시작한 후 가능한 빨리 볼 수 있도록 해당 플래시 카드를 목록의 시작 부분으로 이동할 수 있습니다.
• "OK"버튼을 클릭하면 사용자가 단어를 배웠으며 해당 플래시 카드가 아직 배우지 않은 다른 플래시 카드를 사용할 수 있도록 목록 끝으로 이동해야합니다.

"JavaScript 없이이 일을 할 수 있다고 확신합니까?" 물어볼 수 있습니다. 예! Mavo는 매우 강력하며 필요한 모든 도구를 제공 할 수 있습니다!

우리가 구현할 것이 무엇인지 알았으므로 먼저 UI를 설정하고 다음 단계로 넘어 갑시다. 우리의 태그는 다음과 같습니다.

 ...

  ...
  <h2 id="자신을-평가하십시오">자신을 평가하십시오</h2>
    <button>차이점</button>
    <button>좋은</button>


...

mv-action 속성

Mavo Operation을 통해 사용자가 상호 작용할 때 데이터를 사용자 정의로 수정하는 자체 컨트롤을 만들 수 있습니다. 유망한 것 같네요?

사용자 정의 작업을 정의하려면 Mavo 응용 프로그램 내에 해당 요소에 mv-action 속성을 사용해야합니다. 요소가 클릭 될 때마다 수행됩니다. 이것이 바로 우리가 항상 찾고있는 것입니다.

~을 위한<form> 양식을 <em>제출할</em> 때 요소, 사용자 정의 작업이 수행됩니다. <code>mv-action 속성의 값은 표현입니다. 우리는 mavoscript가 제공 한 모든 표현식 함수와 구문을 사용할 수 있으며 다른 기능을 사용하여 add() , set() , move() 또는 delete() 와 같은 데이터 조작을 용이하게합니다. 반응 방식으로 계산되는 일반적인 표현과 달리, 이러한 표현은 작업이 트리거 될 때마다 만 계산됩니다.

Mavo는 mv-action 속성의 값이 표현이 될 것으로 예상되므로 괄호 안에 둘러싸여있을 필요가 없습니다 : mv-action="expression" . 또한, 우리가 그것들을 포함 시키면, 그것들은 표현의 일부로 취급 될 것입니다.

따라서 컬렉션 내에서 플래시 카드를 이동해야하며 Mavo는이를 수행 할 수있는 적절한 기능을 가지고 있습니다 move() 함수. 첫 번째 매개 변수는 우리가 움직이는 항목을 말하며 두 번째 매개 변수는 컬렉션의 위치 입니다. 컬렉션의 요소는 0에서 시작한다는 것을 기억하십시오.

move 함수 (및 해당 변형) 및 사용자 정의 작업에 대한 자세한 내용은 문서를 참조하십시오.

앞에서 논의한 개요의 첫 번째 포인트를 구현하겠습니다. 자체 평가 중에 최종 사용자는 "열악한"버튼을 클릭하고 해당 플래시 카드가 첫 번째 세트의 시작 부분으로 이동합니다. 그래서 코드에는 다음과 같습니다.

 ...

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

...

mv-action 속성에서는 현재 플래시 카드를 처리하려면 속성 내부의 플래시 카드 속성을 참조하십시오.

개요의 두 번째 지점을 구현하려고하면 문제가 발생합니다. 정확히 문제가 무엇인지 제안 할 수 있습니까?

최종 사용자가 "확인"버튼을 클릭하면 해당 플래시 카드가 컬렉션의 끝으로 이동합니다. 플래시 카드가 세트에서 마지막으로 되려면 세트의 항목 수를 알아야합니다.

고맙게도, 우리는 이전 에이 작업을 해결하고 해당 기능을 구현했습니다. 그러나이 솔루션을 사용하여 현재 문제를 해결할 수 있습니까? 불행히도, 우리는 할 수 없습니다 : 우리가 이미 알고 있듯이, 우리는 플래시 카드 속성 외부의 플래시 카드 (크기를 평가) 만 참조 할 수 있습니다. 그러나 우리의 경우 우리는 그것을해야합니다. 우리는 플래시 카드 속성 안에 "좋은"버튼에 대한 표현식을 작성해야합니다.

그래서 우리는 무엇을해야합니까? 나는 당신이 물어 봤다는 것을 기쁘게 생각합니다. Mavo에는 해결책이 있습니다.

메타 요소를 사용하여 중간 값을 저장하십시오

따라서 한편으로, 우리는 [count(flashcards)] 표현식이 외부에서 플래시 카드 속성을 평가할 때 플래시 카드의 수를 줄 것임을 알고 있습니다. 반면에, 우리는 그 안에 값 플래시 카드 속성을 사용해야합니다.

이 퍼즐을 풀려면 코드의 플래시 카드 수를 평가하고 응용 프로그램의 다른 곳에서 사용하여 플래시 카드 속성 내부에서 정확하게 사용할 수 있도록 결과를 저장해야합니다. 이 경우 Mavo에는 소위 계산 속성이 있습니다.

참조 할 수 있도록 중간 결과를 저장하려면 코드에 HTML 요소가 필요합니다. 이 목적으로 사용하는 것이 좋습니다<meta> 아래와 같이 요소 :<meta content="[expression]" property="propertyName"> . 이 요소를 사용하는 장점은 편집 모드 외부에서 의미 적으로 시각적으로 숨겨져 있다는 것입니다.

계산 된 속성은 기본적으로 저장되지 않습니다.

이제 응용 프로그램에 flashcardCount Computed 속성을 추가하겠습니다. 플래시 카드 속성 외부에 넣어야하지만 어디서나 참조 할 수 있습니다.

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

...

자체 평가 함수의 구현을 완료하기 위해 한 단계 만 남았습니다. 최종 사용자가 "확인"버튼을 클릭하면 해당 플래시 카드가 세트의 끝으로 이동하여 마지막이됩니다. 응용 프로그램의 코드에 관련 작업을 추가하겠습니다.

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

...

우리는 끝났어! 축하해요! ?

이 작업을 해결하는 또 다른 방법이 있습니다. $all 특별 속성 의 도움으로. $all 컬렉션 내부에 있으면 컬렉션 자체를 나타냅니다. 따라서이 경우 계산 된 속성이 필요하지 않습니다. 솔루션을 직접 구현하십시오.

우리가 해결해야 할 마지막은 하나뿐입니다. 앱에 통계를 추가 한 부분을 기억하십니까? 응용 프로그램의 플래시 카드 수를 평가하기 위해 우리가 구축 한 표현을 기억하십시오 : [count(flashcard)] ? 대신, 우리는 이제 정의한 계산 된 속성을 사용하고 사용해야합니다. 응용 프로그램에 해당하는 변경을 수행하십시오.

결론적으로

그래서 우리는 지금까지 무엇을 배웠습니까? 검토합시다. 정적 HTML 페이지를 Mavo 응용 프로그램으로 변환하려면 다음과 같습니다.

1. 페이지에 Mavo JavaScript 및 CSS 파일이 부분적으로 포함되어 있습니다.
2. Mavo 루트 요소에 mv-app 속성을 추가하십시오.
3. property 속성을 추가하여 응용 프로그램의 요소가 중요한 것을 Mavo에게 알려주십시오.
4. mv-multiple 속성을 복사하여 컬렉션으로 변환 할 요소에 배치하십시오.
5. Mavo에게 mv-storage 속성을 Mavo 루트에 추가하여 데이터를 저장할 위치를 알려줍니다.
6. Mavo가 데이터를 자동으로 저장 해야하는지 결정하십시오. 그렇다면 mv-autosave 속성을 Mavo 루트에 추가하십시오. 우리는 또한 알고 있습니다.
7. Mavo 도구 모음은 완전히 사용자 정의 할 수 있습니다. mv-bar 속성 컨트롤이 표시되는 버튼이 표시됩니다.
8. 표현식을 통해 다른 요소로 속성의 현재 값을 표시하고 계산을 수행 할 수 있습니다. 표현식의 값 (및 유형)은 표현식이 코드의 위치에 따라 다릅니다. Mavo의 Expression Syntax를 Mavoscript라고합니다.
9. 사용자 정의 작업을 통해 데이터를 사용자 정의 방식으로 수정하는 컨트롤을 생성 할 수 있습니다. Mavo 응용 프로그램 내에 해당 요소에 대한 사용자 정의 작업을 정의하려면 mv-action 속성을 설정하십시오.
10. 표현식 값을 가진 속성을 계산 된 속성이라고합니다. 응용 프로그램의 다른 곳에서 참조 할 수 있도록 중간 결과를 저장하려면 사용하는 것이 좋습니다.<meta> 요소.

추신

그래서 우리는 응용 프로그램을 구축했습니다. 완벽합니까? 물론, 완벽한 것은 없습니다! 개선해야 할 것이 많으며 추가 할 수있는 기능이 많이 있습니다 (Mavo의 도움으로 앱을 다국어 화 할 수도 있습니다!). 계속해서 더 강화하고 주저하지 말고 새로운 것을 시도하십시오!

지금까지 Mavo에 대한 우리의 지식은 빙산의 일각 일 뿐이며해야 할 일이 더 많습니다. 문서를주의 깊게 읽고, 예제 (Mavo 웹 사이트 또는 Codepen : Lea Verou가 만든 것과 일부는 혼자서 만든)를 확인하고 새로운 컨텐츠를 작성하는 것이 좋습니다! 행운을 빌어요! ?

감사의 말

두 위대한 사람들에게 감사하고 싶습니다. 우선, 나는이 튜토리얼을 작성하고 구현하도록 영감을 줄뿐만 아니라 항상 웹 개발 세계를 더 나은 곳으로 만들도록 영감을 주신 Lea Verou에게 감사의 말씀을 전합니다. 나는 그렇게 재능있는 사람을 본 적이 없으며 그녀와 무언가를 할 수있는 기회를 갖게되어 기쁩니다!

제임스 무어도 감사합니다. 그가 Udemy의 "초보자를위한 JavaScript 기능 프로그래밍"코스에서 사용한 예제는 나만의 FlashCard Learning Application 버전을 만들어 냈습니다. 그는 훌륭한 선생님입니다!

위 내용은 대화식 웹 응용 프로그램을 구축하는 데 Mavo가 빛나게하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!