javascript - Ionic 基础知识 - 哪些元素可用于基本应用程序？

Question

ionic 文档非常令人沮丧。首先，我无法通过网站上描述的方法安装它，在我的 Mac 或 PC 上，我收到“您的 Cordova 版本太旧。请重新安装。”错误，尽管遵循了说明，但我无法修复它。

Tbh 如果我可以下载文件(la jQuery mobile)并继续使用，我不太喜欢在命令行上安装东西。所以我得到了最新的 Ionic beta，我一直在尝试用它构建一些测试。 Ionic 网站上的待办事项应用程序几乎可以正常工作(尽管当您使用 Phonegap 构建它时，元素列表文本是白色的)。

无论如何，我的问题是:我应该使用哪些元素来构建 - CSS 元素还是 JavaScript 元素？

我希望我遗漏了一些非常明显的东西，但我在这里使用了文档:http://ionicframework.com/docs/components/在这里:http://ionicframework.com/docs/api/

让我们来看看标题。 CSS 页面说您可以像这样构建它们:

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

JavaScript 页面是这样的:

<ion-header-bar class="bar-light">
  <h1 class="title">bar-light</h1>
</ion-header-bar>

两者都对我有用，至少在本地。那是哪一个？ CSS 元素并非全部 反射(reflect)在 Javascript 页面中。我只是对此感到困惑，我不想使用速度较慢、效率较低或灵 active 较低的方法。

Answer 1

从本质上讲，Ionic 既是一个css 框架，也是一个javascript 框架。理论上，您可以只使用 css 类并以此方式构建应用程序。

但由于 Ionic 是建立在 Angular 之上的，它允许我们创建已经应用了这些类的简单元素。那么让我们看一个例子。

类

<ul class="list>
  <li class="item" ng-repeat="item in items">
     {{item.name}}
  </li>
<ul>

指令

<ion-list>
  <ion-item ng-repeat="item in items">
    {{item.name}}
  </ion-item>
<ion-list>

这两个 block 都将呈现完全相同的内容。具有 list 类的元素和其中一些具有 item 类的元素。

不同之处在于，如果您想为列表添加一些功能(重新排序元素、滑动选项按钮)，您需要使用指令。因为我们使用的是指令，所以我们可以使用预定义的功能，而不必让用户自己连接逻辑(就像您对 jQuery 插件所做的那样)。

现在这个例子很平淡，但你可以在我们的 Sidemenu 组件的上下文中想象它。虽然您可以在技术上使用类构建侧边菜单，但您必须自己连接逻辑，这并不理想。

希望这能更好地解释事情。