可以在没有Angular的情况下使用Onsen吗？我宁愿使用Aurelia

Question

没有Angular可以使用Onsen吗？ Aurelia数据可以绑定到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;
}

项一览header.html中

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

项一览header.js

export class OnsListHeader {

}

项一览item.html

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

项一览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>

Plunker：http://plnkr.co/edit/Lqm28H42zQbWiQBMHqXq?p=preview