Использование Onsen UI с Meteor.js

В попытке использовать Onsen UI вместе с Meteor.js и Кордова, onsen-css-components.css и onsenui.css были скопированы client/css и onsenui.js в client/lib. Элементы Onsen UI использовались в шаблоне Meteor в app.html.Использование Onsen UI с Meteor.js

Однако стили CSS не применяются к этим элементам ons-*, как показано на рисунке ниже. Какие дополнительные шаги необходимы для применения стилей пользовательского интерфейса Onsen к шаблону?

app.html

<ons-page> 
    <ons-toolbar> 
    <div class="center">List With Header</div> 
    </ons-toolbar> 

    <ons-list> 
    <ons-list-header>Android Versions</ons-list-header> 

    <ons-list-item modifier="chevron">KitKat</ons-list-item> 
    <ons-list-item modifier="chevron">Jelly Bean</ons-list-item> 
    <ons-list-item modifier="chevron">Honycomb</ons-list-item> 

    <ons-list-header>Mac OS X Versions</ons-list-header> 

    <ons-list-item modifier="chevron">Mavericks</ons-list-item> 
    <ons-list-item modifier="chevron">Mountain Lion</ons-list-item> 
    <ons-list-item modifier="chevron">Lion</ons-list-item> 
    <ons-list-item modifier="chevron">SnowLeopard</ons-list-item> 

    </ons-list> 

</ons-page>

app.js

ons.bootstrap(); 
ons.ready(function() { 
    // Add another Onsen UI element 
    var content = document.getElementById("#my-content"); 
    content.innerHTML="<ons-button>Another Button</ons-button>"; 
    ons.compile(content); 
});

Rendered Результат

enter image description here

Javascript Консольные Ошибки

Uncaught ReferenceError: angular is not defined onsenui.js?6c0e6c9dd262aa6735d1d59f874924b40039dcde:3922 
Uncaught ReferenceError: ons is not defined app.js?1177e75f0f0631724c9abb2b3ef5bb97373aca32:1

Как мы можем использовать онсэн UI без угловых зависимостей? Установлен mrt:angular-stack на Meteor 0.9.2.1 и кажется, что его несовместимо с Meteor 0.9+

источник

2014-09-17 Nyxynyx

Мне было интересно, о том же. Похоже, он привязан к Угловому: https://github.com/OnsenUI/OnsenUI/issues/222

источник

2014-09-18 22:05:20

В настоящее время нельзя использовать тег OnsenUI без AngularJS. Однако вы можете иметь стиль OnsenUI, используя его компоненты CSS, которые вы можете найти здесь (http://components.onsenui.io/).

источник

2014-09-24 02:08:45 khemry

Вам необходимо добавить пакет urigo:angular к вашему приложению метеорита. Проверьте http://angular-meteor.com для более подробной информации.

источник

2015-05-28 01:40:32 svallory

Я столкнулся с этим посту, поскольку я также хотел интегрировать OnsenUI для стилизации в Meteor.

Я объединил его с Blaze, просто получив файлы, упомянутые выше автором и скопированные там, где он описал. Затем добавили соответствующие имена классов из OnsenUI https://onsen.io/v2/api/css.html#button-category, и он работал как шарм.

Е.Г., Blaze начала обучающей страница:

<head> 
<title>testapp</title> 
</head> 

<body> 
<h1>Welcome to Meteor!</h1> 

{{> hello}} 
{{> info}} 

</body> 

<template name="hello"> 
<button class="button">Click Me</button> 
<p>You've pressed the button {{counter}} times.</p> 
</template> 

<template name="info"> 

<ul class="list"> 
    <li class="list-header"> 
     Learn Meteor! 
    </li> 
    <li class="list-item"> 
     <div class="list-item__center"><a 
href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a> 
     </div> 
    </li> 
    <li class="list-item"> 
     <div class="list-item__center"><a 
href="http://guide.meteor.com" target="_blank">Follow the Guide</a> 
</div> 
    </li> 
    <li class="list-item"> 
     <div class="list-item__center"><a 
href="https://docs.meteor.com" target="_blank">Read the Docs</a></div> 
    </li> 
    <li class="list-item"> 
     <div class="list-item__center"><a 
href="https://docs.meteor.com" target="_blank">Discussions</a></div> 
    </li> 
</ul> 


</template>

Приветствие

источник

2017-10-01 14:26:29 jit

ответ

Смежные вопросы