ecomfe / etpl

ETPL是一个强复用、灵活、高性能的JavaScript模板引擎,适用于浏览器端或Node环境中视图的生成。
http://ecomfe.github.io/etpl/
BSD 3-Clause "New" or "Revised" License
496 stars 96 forks source link

用 use 调用 target 时无法和 import 中一样复写 block 的内容 #56

Open Justineo opened 9 years ago

Justineo commented 9 years ago

在官网的在线编译跑的:

<!-- target: importOrUse -->
<!-- import: test -->
    <!-- block: content -->imported<!-- /block -->
<!-- /import -->
<!-- use: test -->
    <!-- block: content -->used<!-- /block -->
<!-- /use -->

<!-- target: test -->
[<!-- block: content --><!-- /block -->]

编译结果:

[imported]

[]
    used
errorrik commented 9 years ago

嗯,现在use本来就不支持block替换哈。。。实现成本比较高,暂时没打算支持。。。

Justineo commented 9 years ago

实际的场景是这样,我希望提供一个模板,其中有一个可选的 Sidebar,如果有的话想覆盖里面的 sidebarContent

<!-- target: page -->
<!-- var: sidebar = ${sidebar} === true -->
<!-- if: ${sidebar} -->
<!-- block: sidebar -->
<div data-ui-type="Sidebar" data-ui-id="sidebar" data-ui-mode="fixed">
    <!-- block: sidebarContent --><!-- /block -->
</div>
<!-- /block -->

<div id="neighbor" class="ui-sidebar-neighbor">
<!-- /if -->
<!-- block: mainContent --><!-- /block -->
<!-- if: ${sidebar} -->
</div>
<!-- /if -->

期望使用方式:

<!-- use: page(sidebar = true) -->
    <!-- block: sidebarContent -->Sidebar Content<!-- /block -->
<!-- /use -->

如果 use 暂时不支持的话,调用的地方可能得这么写:

<!-- var: sidebar = true -->
<!-- import: page -->
    <!-- block: sidebarContent -->Sidebar Content<!-- /block -->
<!-- /import -->
errorrik commented 9 years ago

感觉你是定义页面的种类诶,为啥不用master呢?

Justineo commented 9 years ago

master 也行呀,无非是模板写两遍呗。

而且我感觉用 master 调用母版和 import 功能上其实没啥区别,就是可以少写几个字吧。

<!-- target: page -->
    <!-- block: mainContent --><!-- /block -->

<!-- target: pageWithSidebar -->
<!-- block: sidebar -->
<div data-ui-type="Sidebar" data-ui-id="sidebar" data-ui-mode="fixed">
    <!-- block: sidebarContent --><!-- /block -->
</div>
<!-- /block -->

<div id="neighbor" class="ui-sidebar-neighbor">
    <!-- block: mainContent --><!-- /block -->
</div>

这里的 block: mainContent 可能是更复杂的内容,两个模板里只能重复写一遍了。

调用:

<!-- target: listPage(master = pageWithSidebar) -->
    <!-- block: sidebarContent -->Sidebar Content<!-- /block -->
    <!-- block: mainContent -->Main Content<!-- /block -->

似乎也还行吧~

errorrik commented 9 years ago

listPage有没有sidebar,是定义时决定的,还是运行时决定的?

Justineo commented 9 years ago

定义时决定的吧

errorrik commented 9 years ago

定义时决定的,事情就很简单诶,没必要搞这么复杂呢......直接下面这样呗,mypage不要side的时候,就不要import side呗......还是我想的太简单?

<!-- target: main -->
<div id="neighbor" class="ui-sidebar-neighbor">
    <!-- block: mainContent --><!-- /block -->
</div>

<!-- target: side -->
<div data-ui-type="Sidebar" data-ui-id="sidebar" data-ui-mode="fixed">
    <!-- block: sideContent --><!-- /block -->
</div>

<!-- target: myPage -->
<!-- import: side -->
    <!-- block: sideContent -->side content<!-- /block -->
<!-- /import -->
<!-- import: main -->
    <!-- block: mainContent -->main content<!-- /block -->
<!-- /import -->
Justineo commented 9 years ago

主要是 ESUI 的 Sidebar 对 nextSibling 元素有要求,得加特定 class,而没 Sidebar 的时候我不希望有这个 wrapper 元素。