앱 사용자 지정

앱은 MVC(모델, 뷰, 컨트롤러) 구조를 따릅니다.

모델

이 모델은 다양한 속성을 정의하고 해당 값을 저장합니다. 모델에 저장된 다양한 속성들의 값들은 구문을 사용하여 제어기로부터 액세스될 수 있다

this.getValue('attributeName')

앱의 사용자 지정을 위해 새로 만든 모든 속성이 모델의 맵 아래에 추가됩니다.
모델에서 새 속성을 설정하려면 컨트롤러에서 다음 구문을 사용합니다.

// If a key is not already in model then it will be added to extraProps
this.setValue('key', value)

모델에 추가된 속성에 액세스하려면 다음 구문을 사용합니다.

const value = this.getValue("key")

보기

보기는 앱의 UI를 정의합니다. JSON 파일을 사용하여 파일 보기를 정의합니다. 여기에서는 구성 요소 및 css(구성 요소 추출에 제공된 대로)를 정의하고 모델에 저장된 값을 렌더링합니다.
앱에서 각 보기는 JSON을 사용하여 정의됩니다. JSON은 이라는 고유한 ID를 사용하여 참조됩니다. id.

컨트롤러

컨트롤러는 이벤트를 처리하고 데이터를 처리하는 데 사용됩니다. 컨트롤러는 서버에서 데이터를 가져오고 전송하는 데 사용되며 UI에 표시되고 백엔드에 저장되는 항목 간의 인터페이스입니다.

methodName: function(args){
    // functionality
}

다음 methodName 여기서 은(는) 다음 역할을 합니다. key JSON(보기) 또는 다른 함수에서 메서드를 참조하려면

this.next('methodName', args)

예

이제 간단한 예제를 사용하여 이 3가지 구성 요소가 서로 상호 작용하는 방법을 보여 드리겠습니다.
클릭할 때 레이블 값을 전환하는 버튼을 추가하겠습니다

보기 예

아래에서는 변수 이름 아래에 모델에 저장된 동적 텍스트를 표시하는 버튼에 대한 JSON을 정의합니다 buttonLabel.
이 예에서 버튼을 클릭하면 레이블이 변경됩니다.

{
    "component": "button",
    "label": "@extraProps.buttonLabel",
    "variant": "cta",
    "on-click": "switchButtonLabel",
}

모델 예

이 경우, extraProps.buttonLabel 단추의 레이블을 보유합니다.

컨트롤러 예

  controller: {
    init: function (context) {
      context.setValue("buttonLabel", "Submit")
    },

    switchButtonLabel(){
        const buttonLabel = this.getValue("buttonLabel") === "Submit"? "Cancel" : "Submit"
        this.setValue("buttonLabel", buttonLabel)
    }
  }

아래 GIF은 위의 코드를 작동 중인 상태로 보여 줍니다