Can Onsen be used without Angular? I would rather

问题:

Can Onsen be used without Angular?
Can Aurelia data bind to Onsen?

回答1:

Yes, it can be used without Angular.

You would need to take advantage of their css, and develop your custom components like the way they did for Angular.

For example, a simple ons-list Custom Element would be something like:

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
}

Usage (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