onsen-ui - 没有 Angular 可以使用 Onsen 吗？我宁愿使用 Aurelia

Question

没有 Angular 可以使用 Onsen 吗？
Aurelia 数据可以绑定(bind)到 Onsen 吗？

Answer 1

是的，它可以在没有 Angular 的情况下使用。

您需要利用他们的 CSS，并像他们为 Angular 所做的那样开发自定义组件。

例如，一个简单的 ons-list 自定义元素将类似于:

上榜

ons-list.html

<template>
  <ul class="list ${inset ? 'list--inset' : ''}">
    <content select="ons-list-header"></content>
    <content select="ons-list-item"></content>
  </ul>
</template>

ons-list.js

import {bindable} from 'aurelia-framework'

export class OnsList {
  @bindable inset = false;
}

ons-list-header.html

<template>
  <li class="list__header">
    <content></content>
  </li>
</template>

ons-list-header.js

export class OnsListHeader {

}

ons-list-item.html

<template>
  <li class="list__item ${modifier === 'tappable' ? 'list__item--tappable' : modifier === 'chevron' ? 'list__item--chevron' : ''}">
    <content></content>
  </li>
</template>

ons-list-item.js

import {bindable} from 'aurelia-framework'

export class OnsListItem {
  @bindable modifier = ""; // other options: tappable | chevron
}

用法(your-view.html)

<template>
  <ons-list>
    <ons-list-header>My header</ons-list-header>
    <ons-list-item>Item 1<ons-list-item>
    <ons-list-item>${myDynamicItemVariable}</ons-list-item>
  </ons-list>
</template>

骗子:http://plnkr.co/edit/Lqm28H42zQbWiQBMHqXq?p=preview