ดาวน์โหลด Twack - ดาวน์โหลดซอร์สโค้ด Twack

Twack

ส่วนประกอบของบุคคลที่สาม

v2.3.3

ดาวน์โหลด

การแกว่ง

ส่วนประกอบที่ใช้ซ้ำได้สำหรับ ProcessWire-Templates ของคุณ!

ยินดีต้อนรับสู่ Twack! TWACK ช่วยให้คุณสร้างโครงการที่มีโครงสร้างที่ดีและบำรุงรักษาได้ แรงบันดาลใจจากเชิงมุม


ProcessWire-Module:	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
HTML- และ AJAX-Views- ระบุเอาต์พุต JSON สำหรับ AJAX-Requests
กำหนด บริการ ที่จัดการข้อมูลทั่วโลก Twack จัดการคลาสบริการที่ใช้ร่วมกัน (-> Singleton) สำหรับคุณและให้คุณเข้าถึงข้อมูลจากทุกที่ที่คุณต้องการ
ไม่ใช่เอกสิทธิ์ - ใช้ส่วนประกอบ twack เพื่อขยายเทมเพลตที่มีอยู่ คุณไม่ต้องเขียนทุกอย่างใหม่!

สารบัญ

1: หน้าแรก
- 1.1: คุณสมบัติ
- 1.2: การติดตั้ง
- 1.3: QuickStart: การสร้างส่วนประกอบ
- 1.4: Changelog
- 1.5: เวอร์ชัน
- 1.6: ใบอนุญาต
2: การตั้งชื่อการประชุมและตัวแปรส่วนประกอบ
3: พารามิเตอร์ส่วนประกอบ
- 3.1: ไดเรกทอรี
- 3.2: หน้า
- 3.3: พารามิเตอร์
- 3.4: ViewName
4: การจัดการสินทรัพย์
5: บริการ
6: ส่วนประกอบที่มีชื่อ
7: ส่วนประกอบทั่วโลก
8: Ajax-output
9: การกำหนดค่า

การติดตั้ง

สามารถติดตั้ง Twack ได้เช่นโมดูลอื่น ๆ ใน ProcessWire ตรวจสอบคู่มือต่อไปนี้สำหรับข้อมูลรายละเอียด: วิธีการติดตั้งหรือถอนการติดตั้งโมดูล

ข้อกำหนดเบื้องต้นคือ PHP> = 5.5.0 และ เวอร์ชัน ProcessWire> = 3.0.0 อย่างไรก็ตามสิ่งนี้จะถูกตรวจสอบในระหว่างการติดตั้งโมดูล ไม่มีการพึ่งพาเพิ่มเติม

Quickstart: การสร้างส่วนประกอบ

Twack ใช้ส่วนประกอบในการแบ่งเว็บไซต์เป็นส่วนประกอบเชิงตรรกะ องค์ประกอบทั่วไปสามารถยืนหยัดเพื่อตนเองและไม่มีการพึ่งพาซึ่งทำให้สามารถใช้ซ้ำได้และง่ายต่อการบำรุงรักษา ส่วนประกอบส่วนใหญ่ประกอบด้วยคอนโทรลเลอร์และมุมมอง

หากคุณยังไม่ได้สร้างไดเรกทอรี site/templates/components ที่นี่เราจะวางองค์ประกอบในอนาคตทั้งหมดของเรา เพิ่มไฟล์ใหม่ hello_world.view.php ภายในไดเรกทอรี สร้าง site/templates/services ที่คลาสบริการทั้งหมดของเราจะพบบ้าน

เปิดไฟล์และกรอกเนื้อหาต่อไปนี้:

 <?php
namespace ProcessWire ;
?>
<h2>Hello World!</h2>

เสร็จแล้ว! เรามีองค์ประกอบการทำงานครั้งแรกของเรา เป็นที่ยอมรับว่าส่วนประกอบประกอบด้วยมุมมองเดียวเท่านั้น แต่แม้กระทั่งสำหรับส่วนประกอบที่เรียบง่ายมีวัตถุประสงค์ที่เป็นประโยชน์มากมาย เราจะเพิ่มการจัดการข้อมูลและฟังก์ชั่นในอีกสักครู่ แต่ก่อนอื่นเรามาเรียนรู้วิธีการใช้ส่วนประกอบของเราในหนึ่งใน processwire-templates ของเรา

หากเรามีคลาสคอนโทรลเลอร์สำหรับมุมมองของเราชั้นเรียนจะเรียกว่า HelloWorld เพิ่มเติมเกี่ยวกับเรื่องนั้นในบทต่อไป ในการใช้ส่วนประกอบของเราใน ProcessWire-Template เราต้องถามโมดูล twack สำหรับมันและมันจะค้นหาและเริ่มต้นสำหรับเรา

 <?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 ใน processwire-templates แบบดั้งเดิมนั้นค่อนข้างง่าย คุณสามารถสร้าง HTML ที่สมบูรณ์ในมุมมอง twack และใช้ศักยภาพเต็มที่ แต่คุณไม่จำเป็นต้องทำ เป็นไปได้ที่จะค่อยๆแทนที่แต่ละส่วนของหน้า

กลับไปที่องค์ประกอบของเรากันเถอะ คุณสร้างองค์ประกอบ HelloWorld ของคุณโดยไม่มีอะไรนอกจากมุมมองที่แสดงความกล้าหาญ "Hello World!" ส่วนประกอบส่วนใหญ่ต้องการมากกว่าแค่ผลลัพธ์ เราต้องการ คอนโทรลเลอร์ เพื่อทำให้มุมมองมีชีวิตชีวามากขึ้น

สร้าง 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 ทุกคนจะต้องขยายขอบเขตการใช้งานทั่วไปของเราซึ่งนำมาซึ่งความเป็นมาของฟังก์ชั่นพื้นหลังมาสู่คอนโทรลเลอร์ของเรา กับ 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 จะเป็น "Hello World!" ตราบใดที่เราไม่ได้รับค่าสำหรับ $args['title'] จากพารามิเตอร์ $args ของตัวสร้างของเรา หากเราเริ่มต้นส่วนประกอบด้วย $twack->getNewComponent('HelloWorld', ['title' => 'My new Title.']); เราจะตั้งค่าเป็นค่าใหม่นี้

ทุกแอตทริบิวต์ของคอนโทรลเลอร์สามารถเข้าถึงได้ในมุมมองคุณไม่ต้องสนใจเกี่ยวกับการถ่ายโอนค่า

ส่วนประกอบเด็กสามารถเพิ่มผ่าน $this->addComponent() ในตัวอย่างของเราเราเพิ่มส่วนประกอบ 'testchild' ซึ่งจะอยู่ภายใต้ site/templates/components/hello_world/test_child/test_child.class.php Twack จะดูโดยอัตโนมัติในไดเรกทอรีส่วนประกอบปัจจุบันสำหรับไดเรกทอรีย่อย การระบุเส้นทางอื่นก็เป็นไปได้เช่นกัน ฉันสร้างอาร์เรย์ $testChildArgs เพื่อแสดงให้เห็นถึงการส่งพารามิเตอร์เพิ่มเติมไปยัง TestChild ซึ่งจะถูกส่งผ่านไปยังตัวสร้าง

มุมมองใหม่ของเราอาจมีลักษณะเช่นนี้:

 <?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 มีคุณสมบัติที่ยอดเยี่ยมมากมายที่จะทำให้กระบวนการพัฒนาของคุณง่ายขึ้น