Element

In buto a HTML element should be stored in YML. It is pretty much like ordinary HTML but in YML format. The advantage is that we easily could handle elements in PHP before there are render in browser. An element could also have settings params.

  YML
  
-
  type: div
  innerHTML:
    -
      type: span
      attribute:
        id: hw
      innerHTML: Hello World

  HTML
  
<div><span id="hw">Hello World</span></div>

Edit by string

One could edit yml by a key string.

  Edit by array key.
  
wfPlugin::includeonce('wf/yml');
$data = new PluginWfYml('/theme/wf/buto/example/element.yml');
$data->set('0/innerHTML/0/innerHTML', 'Hello Buto');

  HTML
  
<div><span id="hw">Hello Buto</span></div>

Edit by id

One could also edit by using id.

  Edit by id.
  
wfPlugin::includeonce('wf/yml');
$data = new PluginWfYml('/theme/wf/buto/example/element.yml');
$data->setById('hw', 'innerHTML', 'Hello Buto by id');

  HTML
  
<div><span id="hw">Hello Buto by id</span></div>

Add element

Add one more span tag. Note the extra slash after "innerHTML".

  Add element.
  
wfPlugin::includeonce('wf/yml');
$data = new PluginWfYml('/theme/wf/buto/example/element.yml');
$data->set('0/innerHTML/', wfDocument::createHtmlElement('span', 'One more span tag'));

  HTML
  
<div><span id="hw">Hello World</span><span>One more span tag</span></div>

Nestled YML files

One could have netled elements in YML.

  YML element
  
-
  type: div
  innerHTML:
    -
      type: span
      innerHTML: yml:/theme/wf/buto/example/element_nestled_data.yml:text
-
  type: div
  innerHTML: yml:/theme/wf/buto/example/element_nestled_data.yml:element

  YML data
  
text: Hello World
element:
  -
    type: b
    innerHTML: Text
  -
    type: span
    innerHTML: Text

  HTML
  
<div>
  <span>Hello World</span>
</div>
<div>
  <b>Text</b>
  <span>Text</span>
</div>