README

什么是Matisse？

Matisse是一个PHP Web应用程序的组件化模板引擎。

像任何其他模板引擎一样，Matisse通过将源（模板）文档与领域模型中的数据相结合来生成HTML文档。

与其他大多数PHP模板引擎不同，后者使用在某种DSL上编写的内嵌命令处理HTML标记，Matisse使用组件，这些是参数化、可组合和可重用的渲染逻辑和标记的单位，它们以XML标签的形式编写。

源模板是一个HTML文本文件，其中除了常见的HTML标签（始终为小写）外，以大写字母开头的特殊标签指定了动态组件。

Matisse模板的示例

<h1>Some HTML text</h1>
<form>
    <Input name="field1" value="{{ myVar }}"/>
    <Repeat for="{{ !myData }}">
        <Header><ul></Header>
        <li>Item {{ name }}</li>
        <Footer></ul></Footer>
        <NoData>The are no items.</NoData>
    </Repeat>
</form>

在上面的示例中，注意如何仅在<Footer>标签内关闭<ul>标签，这似乎违反了模板的正确HTML标签嵌套结构。实际上，模板是完全有效的，生成的HTML输出也是有效的。这是因为，对于Matisse来说，所有HTML标签都是纯文本，没有任何特殊含义。所有位于组件标签（以大写字母开头）之间的文本都转换为尽可能少的文本组件。

因此，上面示例中真正的DOM（由Matisse解析）如下

<Text/>
<Input/>
<Repeat>
    <Header/>
    <Text/>
    <Footer/>
    <NoData/>
</Repeat>
<Text/>

每个组件标签都被转换为相应PHP类的一个实例。当模板渲染时，每个组件实例负责生成该组件的HTML表示，以及可选的（内嵌或外部的）JavaScript代码和样式表引用或内嵌CSS样式。

编写模板时，HTML标记应使用HTML 5语法编写，组件标签必须使用XML语法编写。这意味着属性值必须始终用引号括起来，并且标签必须始终关闭，即使标签没有内容（可以使用自闭合标签语法：<Component/>）。

组件也可以通过模板文件使用纯标记定义，而不需要任何PHP代码。这些模板在概念上类似于参数宏。

宏组件将它们的标记插入到宿主模板中，然后消失，只留下生成的标记（可能包含其他组件）。当模板被缓存在磁盘上以供将来重用时，所有宏组件都消失了，因此缓存的模板比原始模板性能更高。

Matisse模板的更高级示例，其中定义了一个实现可定制的面板的宏组件

<Template name="Form" defaultParam="content">
  <Param name="type" type="text" default="box-solid box-default"/>
  <Param name="title" type="text"/>
  <Param name="content" type="source"/>
  <Param name="footer" type="source"/>

  <div class="form box {{ @type }}">
    <If the="{{ @title }}" isSet>
      <div class="box-header with-border">
        <h3 class="box-title">{{ @title }}</h3>
      </div>
    </If>
    <div class="box-body">
      {{ @content }}
    </div>
    <If the="{{ @footer }}" isSet>
      <div class="box-footer">
        {{ @footer }}
      </div>
    </If>
  </div>
</Template>

然后您可以像这样创建此组件的实例

<Form type="box-info" title="My title">
  <h1>Welcome</h1>
  <p>Some text here...</p>
  <Footer>
    {{ footerText }}
  </Footer>
</Form>

解析模板时，模板将进行宏扩展并转换为最终形式

<div class="form box box-info">
  <If the="My title" isSet>
    <div class="box-header with-border">
      <h3 class="box-title">My title</h3>
    </div>
  </If>
  <div class="box-body">
    <h1>Welcome</h1>
    <p>Some text here...</p>
  </div>
  <If the="{{ footerText }}" isSet>
    <div class="box-footer">
      {{ footerText }}
    </div>
  </If>
</div>

如果定义以下视图模型

[
  'footerText' => 'Some footer text...'
]

渲染时，模板将生成以下HTML标记

<div class="form box box-info">
  <div class="box-header with-border">
    <h3 class="box-title">My title</h3>
  </div>
  <div class="box-body">
    <h1>Welcome</h1>
    <p>Some text here...</p>
  </div>
  <div class="box-footer">
    Some footer text...
  </div>
</div>

许可证

Selene框架是开源软件，采用MIT许可证。

selene-framework / matisse

维护者

详细信息

README

什么是Matisse？

更多文档

许可证