Question

在尝试与Meteor.js和Cordova一起使用Onsen UI时，onsen-css-components.css和onsenui.css被复制到client/css和onsenui.js到client/lib。温度UI元素用于app.html中的Meteor模板。

但是，似乎没有CSS样式应用于这些ons-*元素，如下面的屏幕截图所示。将Onsen UI样式应用于模板需要哪些其他步骤？

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);
});

呈现结果

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

如何在没有Angular依赖的情况下使用Onsen UI？在Meteor 0.9.2.1上安装了mrt:angular-stack，它似乎与Meteor 0.9 +

不兼容

Answer 1

我想知道同样的事情。看起来它与Angular超级联系：https://github.com/OnsenUI/OnsenUI/issues/222

Answer 2

目前，没有AngularJS就不可能使用OnsenUI标签。但是，您可以使用可在此处找到的CSS组件（http://components.onsenui.io/）来使用OnsenUI样式。

Answer 3

您必须将urigo:angular包添加到您的meteor应用中。查看http://angular-meteor.com了解详情。

Answer 4

我遇到过这篇文章，因为我也希望将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>

干杯

使用带有Meteor.js的Onsen UI

4 个答案: