可以在不使用Angular的情况下使用Onsen吗?我宁愿使用Aurelia [英] Can Onsen be used without Angular? I would rather use Aurelia

问题描述

可以在不使用Angular的情况下使用Onsen吗?
Aurelia数据可以绑定到Onsen吗?

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

推荐答案

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

Yes, it can be used without Angular.

您需要利用他们的CSS，并像使用Angular一样开发自定义组件.

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

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

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

<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

这篇关于可以在不使用Angular的情况下使用Onsen吗?我宁愿使用Aurelia的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！