条件和循环

条件渲染

有时需要按需在页面渲染内容，zin 支持 if 语句和三元表达式来实现，下面分别进行介绍。

if 语句 + 中间变量

example/ui/view.html.php

/* $canClose 决定是否渲染关闭按钮 */
$canClose = true;

/* $closeBtn 作为中间变量用于存储最终渲染的内容 */
$closeBtn = null;

/* 使用 if 进行判断，动态设置 $closeBtn 的值 */
if($canClose) $closeBtn = btn(set::icon('close'));

div
(
    $closeBtn
);

生成的 HTML

<div>
  <button type="button" class="btn"><i class="icon icon-close"></i></button>
</div>

三元表达式

example/ui/view.html.php

/* $canClose 决定是否渲染关闭按钮 */
$canClose = true;

/* 在页面声明中使用 */
div
(
    /* 使用三元表达式 */
    $canClose ? btn(set::icon('close')) : null
);

生成的 HTML

<div>
  <a class="btn"><i class="icon icon-close"></i></a>
</div>

提示

zin 部件方法内的 null、true、false 都将不会渲染任何内容，详情参考 部件 文档。

列表渲染

将一个原始的数据数组渲染为一个列表是非常常见的，在 zin 中支持 foreach 和 array_map 两种方式来实现，下面分别进行介绍。

foreach 循环 + 中间变量

example/ui/view.html.php

/* 原始数据数组 */
$links = array
(
    array('title' => '首页', 'url' => '/'),
    array('title' => '关于', 'url' => '/about'),
    array('title' => '联系', 'url' => '/contact'),
);

/* $items 作为中间变量存储最终渲染的内容 */
$items = [];

/* 使用 foreach 循环 */
foreach($links as $link)
{
    $items[] = item(set::text($link['title']), set::url($link['url']));
}

/* 在页面声明中使用 */
toolbar($items);

生成的 HTML

<div class="toolbar">
  <a class="btn toolbar-item" href="/">首页</a>
  <a class="btn toolbar-item" href="/about">关于</a>
  <a class="btn toolbar-item" href="/contact">联系</a>
</div>

array_map

array_map 是 php 内置方法，可以为数组的每个元素应用回调函数，当然也可以将一个原始数据数组映射为一个 zin 渲染结果数组。下面介绍用法：

example/ui/view.html.php

/* 原始数据数组 */
$links = array
(
    array('title' => '首页', 'url' => '/'),
    array('title' => '关于', 'url' => '/about'),
    array('title' => '联系', 'url' => '/contact'),
);

/* 定义渲染方法供 array_map 调用 */
function buildToolbarItem($link)
{
    return item(set::text($link['title']), set::url($link['url']));
}

/* 在页面声明中使用 */
toolbar
(
    array_map('buildToolbarItem', $links)
);

生成的 HTML

<div class="toolbar">
  <a class="btn toolbar-item" href="/">首页</a>
  <a class="btn toolbar-item" href="/about">关于</a>
  <a class="btn toolbar-item" href="/contact">联系</a>
</div>

提示

建议所有返回 zin 渲染内容的方法名称都以 buildXxxXxxxx 的形式定义，例如 buildProjectList、buildTodoCheckbox 等。