ahmjw/php-dom-view

通过DOM将输出渲染为HTML视图

v1.0.5 2018-01-27 17:08 UTC

This package is not auto-updated.

Last update: 2024-09-20 20:11:02 UTC


README

A PHP库,通过使用特殊属性从HTML页面中提取和写入变量。它使视图的创建变得简洁和简单。它完全分离了视图和控制台。因此,你不需要在视图中编写PHP代码。这是真正的视图。

作者简介

Ahmad (rawndummy@gmail.com)

主页: http://chupoo.introvesia.com

要求

  • PHP 5.3或更高版本
  • PSR-4兼容的自动加载器
  • Composer

安装

此库是为通过Composer安装而开发的。请确保您已在计算机上安装了Composer。您可以从https://getcomposer.org.cn/download/下载它。

在命令行中运行以下命令。

composer require ahmjw/php-dom-view

或者创建一个名为composer.json的文件。写下以下代码。

{
    "require": {
        "ahmjw/chupoo-framework": "^1.0"
    }
}

在包含composer.json文件的相同目录中打开命令行。执行以下代码进行安装。

php composer.phar install

自动加载

<?php

include 'vendor/autoload.php';

特殊HTML标签

c.content

通过在HTML模板中写入<c.content></c.content><c.content />,它将替换为视图的内容。

c.import

你可以通过写入<c.import name="menu"></c.import><c.import name="menu" />调用其他HTML文件。在name属性中写入HTML模板的名称。值menu将调用名为"menu.html"的HTML模板文件。它将替换为被调用HTML文件的内容。

c.partial

你可以通过写入<c.partial name="header"></c.partial><c.partial name="header" />调用其他HTML文件。将您所写的布局的任何部分剪切并写入其他HTML文件。当您需要将同一布局的一部分共享到其他布局中时,可以使用它。在name属性中写入HTML模板的名称。值header将调用名为"header.html"的HTML模板文件。它将替换为被调用HTML文件的内容。

c.widget

它将标记区域为小部件区域。在此过程中,系统将收集所有小部件并将其存储到小部件列表中。当您发送小部件信息作为反馈时,系统将渲染小部件HTML文件。要标记区域以显示为小部件,请写入<c.widget name="sidebar"></c.widget><c.widget name="sidebar" />。在name属性中写入小部件键。它将把name值放入小部件列表中。

c.config

通过在视图HTML中写入<c.config layout="two-columns"></c.config><c.config layout="two-columns" />,它将执行它所声明的布局。在layout属性中写入HTML模板的名称。值two-columns将调用名为"two-columns.html"的HTML模板文件。

配置属性

  • layout,为视图设置布局名称。
  • separate-assets,设置样式和脚本是否使用分离。

特殊HTML元素属性

c.if

定义一个表达式来控制HTML元素的可见性。您可以通过以下格式定义表达式。

  • 检查全局数据中是否存在键:var(x)
  • 检查全局数据中是否存在键:!var(x)
  • 检查键的值是否等于右操作数:var(x) = 1
  • 检查键的值是否不等于右操作数:var(x) != 1
  • 通过探索其深度检查数组中的键:var(x.y.z)
  • 检查与当前元素当前使用的数据链接的键: var(.x)

注意: x 是数据中的键名。 1 是一个值。您可以将其定义为数字或字符串。

示例代码

自动加载和类定义(index.php)

<?php

use Introvesia\PhpDomView\View;
use Introvesia\PhpDomView\Layout;
use Introvesia\PhpDomView\Config;

include 'vendor/autoload.php';

设置配置

layout_dir 是放置您的 HTML 布局文件的目录位置。 view_dir 是放置您的 HTML 视图文件的目录位置。

Config::setData(array(
  'layout_dir' => __DIR__ . '/layouts',
  'view_dir' => __DIR__ . '/views'
));

视图的示例数据

$view_data = array(
  'title' => 'People',
  'people' => array(
    array(
      'name' => 'Adam Smith',
      'nationality' => 'USA'
     ),
    array(
      'name' => 'Kenji Yamada',
      'nationality' => 'Japan'
     ),
    array(
      'name' => 'Surya Wijaya',
      'nationality' => 'Indonesia'
     )
   )
);

布局的示例数据

$layout_data = array(
  'meta_title' => 'My Blog',
);

显示输出

$view = new View('index', $view_data);
$layout = new Layout('index', $layout_data);
$layout->parse($view);
print $layout->getOutput();

视图 HTML 代码(views/index.html)

<h1 c.title></h1>
<table border="1" cellpadding="5">
<tr>
  <th>Name</th>
  <th>Nationality</th>
</tr>
<tr c.people>
  <td c.name>This is name column</td>
  <td c.nationality></td>
</tr>
</table>

布局 HTML 代码(layouts/index.html)

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>
<body>
  <table cellpadding="20">
    <tr>
      <td valign="top">
      	<c.widget name="sidebar"></c.widget>
      </td>
      <td valign="top">
      	<c.content></c.content>
      </td>
    </tr>
  </table>
</body>
</html>

小部件 HTML 代码(views/menu.html)

<h3 c.menu_title></h3>
<ul>
  <li c.links><a href="" c.link></a></li>
</ul>

将视图渲染到小部件

$links = array(
  array('link' => array('Link 1', 'href' => '#first')),
  array('link' => array('Link 2', 'href' => '#second')),
  array('link' => array('Link 3', 'href' => '#third')),
);

$layout->renderWidget('sidebar', array(
  new View('menu', array(
    'menu_title' => 'My Menu',
    'links' => $links
  )),
));

定义表达式

通过向具有变量选择器 c.peopletr 元素添加属性 c.if,以下示例代码将仅显示非美国人的信息。

...
<tr c.people c.if="var(.nationality) != USA">
...

将布局分离为部分布局(layouts/header.html)

<!DOCTYPE html>
<html>
<head>
	<title>My Site</title>
</head>

调用部分布局

<c.partial name="header"></c.partial>
...