Twack
v2.3.3
ProcessWire-Template에 대한 재사용 가능한 구성 요소!
Twack에 오신 것을 환영합니다! Twack은 잘 구조화되고 유지 가능한 프로세스 와이어 프로젝트를 구축하는 데 도움이됩니다. Angular에서 영감을 얻었습니다.
| 프로세스 와이어 모듈 : | https://modules.processwire.com/modules/twack/ |
| 지원 포럼 : | https://processwire.com/talk/topic/23549-twack/ |
| 저장소: | https://github.com/sebiworld/twack |
| 위키 : | https://github.com/sebiworld/twack/wiki/ |
Twack은 ProcessWire의 다른 모든 모듈과 마찬가지로 설치할 수 있습니다. 자세한 정보는 다음 안내서를 확인하십시오 : 방법 모듈 설치 또는 제거 방법
전제 조건은 PHP> = 5.5.0 이고 프로세스 와이어 버전> = 3.0.0 입니다. 그러나 이것은 모듈 설치 중에도 확인됩니다. 더 이상 종속성이 없습니다.
Twack은 구성 요소를 사용하여 웹 사이트를 논리적 구성 요소로 세분화합니다. 전형적인 구성 요소는 자체적으로 입수 할 수 있으며 종속성이 없으므로 재사용 가능하고 유지 관리가 쉬워집니다. 대부분의 구성 요소는 컨트롤러와보기로 구성됩니다.
완료되지 않은 경우 site/templates/components 디렉토리를 만듭니다. 여기에 우리는 모든 미래의 구성 요소를 배치 할 것입니다. 디렉토리 내부에 새 파일 hello_world.view.php 추가하십시오. 모든 서비스 클래스가 주택을 찾을 수있는 site/templates/services 만듭니다.
파일을 열고 다음 내용을 작성하십시오.
<?php
namespace ProcessWire ;
?>
<h2>Hello World!</h2>끝났어! 첫 번째 기능 구성 요소가 있습니다. 물론, 구성 요소는 단 하나의 뷰로 만 구성되지만 간단한 구성 요소의 경우에도 유용한 목적이 많이 있습니다. 우리는 잠시 안에 데이터 처리 및 기능을 추가 할 것입니다. 그러나 먼저, 프로세스 와이어 템플릿 중 하나에서 구성 요소를 사용하는 방법을 배우겠습니다.
우리가 우리의 견해를 위해 컨트롤러 클래스를 가지고 있다면, 클래스는 HelloWorld 라고합니다. 다음 장에서 더 자세히 설명하십시오. ProcessWire-Template에서 구성 요소를 사용하려면 Twack-Module에게 요청해야하며이를 찾아 초기화 할 것입니다.
<?php
namespace ProcessWire ;
// Get a new instance of our HelloWorld-component:
$ myComponent = wire ( ' twack ' )-> getNewComponent ( ' HelloWorld ' );
?>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<?php
// Render the component`s view:
echo $ myComponent -> render ();
?>
</body>
</html>보시다시피, 전통적인 프로세스 와이어-템플릿에 Twack 구성 요소를 포함한 것은 매우 간단합니다. Twack-Views에서 완전한 HTML을 구축하고 잠재력을 최대한 활용할 수는 있지만 그럴 필요는 없습니다. 페이지의 개별 부분을 점차적으로 교체 할 수 있습니다.
우리 구성 요소로 돌아 갑시다. 당신은 대담한 "Hello World!"를 출력하는 견해만으로 Helloworld-component를 만들었습니다. 대부분의 구성 요소는 단순한 출력 이상이 필요합니다. 보기를보다 역동적으로 만들려면 컨트롤러가 필요합니다.
새 디렉토리 site/templates/components/hello_world/ 를 만들고 뷰 파일을이 대상으로 이동하십시오. 또한이 새 디렉토리에서 hello_world.class.php 라는 이름의 컨트롤러 파일을 만듭니다.
Twack-Controller는 올바르게 작동하기 위해 약간의 보일러 플레이트 코드가 필요합니다. 다음 코드를 컨트롤러 파일에 복사하십시오 ( hello_world.class.php ) :
<?php
namespace ProcessWire ;
class HelloWorld extends TwackComponent {
public function __construct ( $ args ) {
parent :: __construct ( $ args );
}
} 모든 Twack-Controller는 일반적인 TwackComponent를 확장해야하므로 컨트롤러에 많은 백그라운드 기능을 제공합니다. parent::__construct($args); 맞춤 구성 요소의 코드가 실행되기 전에 부모 TwackComponent 일반 초기화 작업을 완료하도록했습니다.
우리의 생성자에서는 변수를 정의하고, 자녀 경쟁사를 추가하며,보기를 위해 모든 논리적 작업을 수행합니다.
조금 더 고급 컨트롤러가 다음과 같이 보일 수 있습니다.
<?php
namespace ProcessWire ;
class HelloWorld extends TwackComponent {
public function __construct ( $ args ) {
parent :: __construct ( $ args );
$ this -> title = ' Hello World! ' ;
if ( isset ( $ args [ ' title ' ])) {
$ this -> title = $ args [ ' title ' ];
}
// Add and initialise a child-component
$ testChildArgs = [
' myTestValue '
];
$ this -> addComponent ( ' TestChild ' , $ testChildArgs );
}
} $this->title 생성자의 $args 매개 변수에서 $args['title'] 에 대한 가치를 얻지 못하는 한 "Hello World!"입니다. 만약 우리가 $twack->getNewComponent('HelloWorld', ['title' => 'My new Title.']); , 우리는이 새로운 가치로 설정했습니다.
컨트롤러의 모든 속성은보기에서도 액세스 할 수 있으므로 값을 전송하는 데 신경 쓰지 않아도됩니다.
하위 구성 요소는 $this->addComponent() 를 통해 추가 할 수 있습니다. 이 예에서는 site/templates/components/hello_world/test_child/test_child.class.php 아래에있는 구성 요소 'testchild'를 추가합니다. Twack은 하위 디렉토리에 대한 현재 구성 요소의 디렉토리를 자동으로 살펴 봅니다. 다른 경로를 지정하는 것도 가능합니다. 추가 매개 변수를 TestChild 에 전달하는 것을 보여주기 위해 Array $testChildArgs 만들었습니다.
우리의 새로운 견해는 다음과 같이 보일 수 있습니다.
<?php
namespace ProcessWire ;
?>
<div class="hello_world_component">
<?php
if (! empty ( $ this -> showTitle )){
echo " <h2> { $ this -> showTitle } </h2> " ;
}
?>
<p>Lorem ipsum</p>
<div class="children_wrapper">
<?php
foreach ( $ this -> childComponents as $ childComponent ) {
echo ( string ) $ childComponent ;
}
?>
</div>
</div> 보시다시피, 우리는 $this->title 값이있는 경우 제목 만 표시합니다. $this->childComponents 아래에 컨트롤러에서 $this->addComponent() 통해 추가 된 모든 구성 요소 목록이 있습니다.
우리는 이제 기본 Twack 구성 요소를 만들었고 이제는 Twack의 작동 방식을 일반적인 개념입니다. 그러나 Twack은 개발 프로세스를 강화하고 단순화 할 수있는 더 큰 기능 중 하나입니다.
lang Param 옵션 개선, 바로 가기로 사용할 수있는 많은 langagage 코드를 추가하십시오.lang Param 옵션 추가wire('twack') 와 같은 Api-Variable로 제공되었습니다. (@bernhardbaumrock에 감사합니다) 우리는 버전 관리에 Semver를 사용합니다. 사용 가능한 버전은이 저장소의 태그를 참조하십시오.
이 프로젝트는 Mozilla Public License 버전 2.0에 따라 라이센스가 부여됩니다. 자세한 내용은 License.md 파일을 참조하십시오.
➡️ 2 : 명명 규칙 및 구성 요소 변형을 계속하십시오
