×

EmberJS 教程

EmberJS 概述EmberJS 环境配置EmberJS 应用EmberJS 对象模型EmberJS 模板EmberJS 路由器EmberJS 组件EmberJS 模型EmberJS 视图EmberJS 控制器EmberJS 测试EmberJS 指定查询参数

Ember 对象模型

Ember 类的定义 初始化 继承Ember 类的扩展Ember 计算属性Ember 观察者Ember 数据绑定Ember 枚举Ember 第一章对象模型小结

Ember handlebars模板

Ember handlebars基础Ember handlebars条件表达式Ember handlebars遍历标签Ember handlebars显示对象键Ember handlebars属性绑定Ember {{link-to}} 助手Ember 路由 模板执行渲染顺序Ember {{action}} 助手Ember 表单元素Ember 调试助手Ember 工具类的助手Ember 第二章模板小结

Ember 路由

Ember 路由定义Ember 指定与路由关联的模型Ember 模板渲染Ember 路由重定向Ember 路由终止挑战和激活Ember loading error子路由Ember 查询参数Ember 异步路由

Ember 组件

Ember 组件定义Ember 属性传递Ember 包裹内容自定义包裹组件的HTML标签Ember 处理事件Ember action触发变化

Ember 控制器

Ember 控制器Ember 管理控制器的依赖关系

Ember 模型

Ember model简介Ember 定义模型Ember 记录查询Ember 新建、更新、删除记录Ember 设置记录到StoreEmber model的关联关系处理Ember 元数据Ember 自定义适配器Ember 自定义序列号器

Ember 测试

Ember 测试简介Ember 验收测试Ember 单元测试

EmberJS 环境配置


通过将JavaScript库文件包含在HTML文件中的<script>标记中,可以轻松配置Ember.js;这可以通过以下两种方式完成:

  • 您可以从其官方网站下载最新版本的Ember.js JavaScript库文件。

  • 您可以从官方网站包括最新版本的CDN。

下载JavaScript库

在安装emberjs之前,它应该要求在具有兼容浏览器的系统上安装nodej。在nodejs命令行界面中使用以下命令安装emberjs-

npm install -g ember-cli

要创建应用程序,请使用以下命令 -

ember new my-app

CDN来自官方网站

CDN或内容传送网络是设计为向用户提供文件的服务器网络。如果您在网页中使用CDN链接,它将托管文件的责任从您自己的服务器迁移到一系列外部服务器。这也提供了一个优点,如果您的网页的访问者已经从相同的CDN下载了Ember.js的副本,则不必重新下载。

在使用Ember.js时,你需要把这些CDN的js文件引入:

  • jQuery
  • Handlebars
  • Ember.js

所有CDN都从这里获取

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="https://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://builds.emberjs.com/beta/ember-data.js"></script>

以下是成功生成的不同软件包:

  • ember.debug.js:这是一个完整的开发版本。它包括几乎所有的包。

  • jQuery-2.1.3.min.js:它删除不必要的字符,使文件大小更小。

  • ember.prod.js:生产文件删除任何调试语句和/或断言。它包括所有包,除了:

    • handlebars.min.js

    • ember.debug.js

  • handlebars.min.js:它用于有效地构建语义模板。

  • ember-template-compiler.js模板编译器可以用于服务器端进行预编译。

  • ember-data.js它用于处理Ember数据。

在本教程程序的所有章节中,我们引用了Ember.js JavaScript库的最新CDN。

例子

让我们创建一个使用Ember.js一个简单的例子:

<!DOCTYPE html>
<html>
   <head>
      <title>Ember.js Application example</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <!-- Your JavaScript -->
      <script type="text/x-handlebars">
         <!-- this is default application template -->
          <h1>{{App.name}}</h1>
          {{outlet}}
      </script>

      <script type="text/javascript">
         //App is the object of the Ember.Application
         //create() is the constructor of the Ember.Application
         App = Ember.Application.create();

         //App.name is the variable that holds the string values
         App.name= "Hello... Welcome to TutorialsPoint";
      </script>
   </body>
</html>

代码中的注释是自解释的。代码的一些更多细节如下:

App.name是一个变量,它保存要使用Handlebars在Web浏览器上显示的String值。

输出

让我们执行以下步骤,看看上面的代码如何工作:

  • 将上面的代码保存在hello_emberjs.html文件中

  • 在浏览器中打开此HTML文件。


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)