Question

我正在玩Onsen UI并想知道在没有Angular JS的情况下使用Onsen UI时是否有定义和包含HTML片段的方法？

例如，假设我有两页：

<ons-template id="page1.html">
    <ons-page>
        <ons-toolbar>
            <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
            <div class="center">Page 1</div>
        </ons-toolbar>
        <p>Page 1 content</p>
    </ons-page>
</ons-template>

<ons-template id="page2.html">
    <ons-page>
        <ons-toolbar>
            <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <p>Page 2 content</p>
    </ons-page>
</ons-template>

<ons-toolbar-button>的定义在两个页面中都是重复的，所以有没有一种机制来定义代码片段并多次注入它？

<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>

我知道使用Angular可以使用ngInclude指令来完成，但想知道<ons-template>是否可以以某种方式用于执行此操作而无需使用Angular？

Answer 1

Onsen UI 1.x基于Angular，因此很难在不使用它的情况下执行任何操作。

你在寻找什么是Onsen UI 2，它基于Web Components。这意味着它完全不可知（平台无关），可以与任何其他框架结合使用。实际上它是在alpha版本中发布但它已经非常稳定，预计很快会推出测试版。

如果你想看看Onsen UI 2.0，你可以：

检查Onsen UI GitHub Repository上的最新版本。
遵循快速入门程序：

Quickstart
$ git clone http://github.com/OnsenUI/onsenui2-quickstart
$ cd onsenui2-quickstart
$ npm install && gulp serve

Onsen UI - 没有Angular JS的可重用HTML片段？

1 个答案: