Open Justineo opened 9 years ago
嗯,现在use本来就不支持block替换哈。。。实现成本比较高,暂时没打算支持。。。
实际的场景是这样,我希望提供一个模板,其中有一个可选的 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 -->
感觉你是定义页面的种类诶,为啥不用master呢?
用 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 -->
似乎也还行吧~
listPage有没有sidebar,是定义时决定的,还是运行时决定的?
定义时决定的吧
定义时决定的,事情就很简单诶,没必要搞这么复杂呢......直接下面这样呗,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 -->
主要是 ESUI 的 Sidebar 对 nextSibling
元素有要求,得加特定 class,而没 Sidebar 的时候我不希望有这个 wrapper 元素。
在官网的在线编译跑的:
编译结果: