bond components

2.0+

Bond components

Bond Components

The bond components are bond template files that are rendered into rex template files through the main bond directive bond(). The first argument of this directive is used to call a bond component controller from the spoova/mi/windows/Bond namespace. Once called, the bond component controller will determine how bond components are rendered into the webpage. Bond componnents are added separately into a reserved directory "windows/Rex/Bond" where they can be rendered before being added to the web page. The main feature of bond component is that they have extended functionality of rendering live templates using bond live template attributes.

Installing Bond Script

The bond component resource handlers comes with version 2.0. The bond components are handled internally, however, the bond scripts are not loaded by default. Along with other core static files, the bond script is added to the resource controller file and can be loaded into the rex template file by using the @load('bond') directive. This will include the bond script into the template file and we can start to work with bond components. A sample is shown below

  
    @template('sample')

      @load('bond')

    @template;

Using the sample above as reference, while the @template directive loads an external template, the @load directive will load the bond scripts into the template file. Once we load the bond script, we can then continue with initializing the bond components.

Initializing Bond Components

Bond components components can be intialized by adding the bond directive bond() to the rex template file similarly as below:

  bond('Posts')

  namespace spoova/mi/windows/Bond;

  use spoova/mi/core/classes/Bond;

  class Posts extends Bond{


    public function render(): Compiler|String {

      return <<<compile
      <div>Hello World!</div>
      compile;

    }


  }

Using the sample above as reference, assuming we added the directive bond('Posts') to our template file. The directive will in turn call the bond component controller spoova/mi/windows/Bond/Posts. This will render the page and return the text "Hello world!" .

We can also return a compiler object through the render method as shown below :

  <php?

  namespace spoova/mi/windows/Bond;

  use spoova/mi/core/classes/Bond;

  class Posts extends Bond{

    function render() : Compiler|String {

      return compile('bond.template_path');

    }

  }

window/Rex/bond/template_path

  <div>
    Hello world!
  </div>

Note: It is important to keep bond components in a separate subdirectory of the windows/Rex directory so as to prevent conflicting of files and to make it easier to locate them. Also, all bond component must have a root element

variables