在 Meteor.js 中使用 Onsen UI答案

【问题标题】：Using Onsen UI with Meteor.js在 Meteor.js 中使用 Onsen UI
【发布时间】：2014-11-11 23:23:26
【问题描述】：

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

但似乎没有 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);
});

渲染结果

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+ 不兼容

【问题讨论】：

标签： javascript cordova meteor meteor-blaze onsen-ui

【解决方案1】：

我也在想同样的事情。看起来它与 Angular 超级相关：https://github.com/OnsenUI/OnsenUI/issues/222

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您必须将 urigo:angular 包添加到您的流星应用程序。详情请查看http://angular-meteor.com。

【讨论】：

【解决方案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>

干杯

【讨论】：