CODEWITHSUNDEEP
onsen-uiaurelia
user2577163
user2577163

Reputation:

Can Onsen be used without Angular? I would rather use Aurelia

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

Upvotes: 2

Views: 378

Answers (1)

Buzinas
Buzinas

Reputation: 11725

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

Upvotes: 6

Related Questions