button按钮的属性设置_引入计算属性、action、动态内容

接着前面一篇：

1. 环境搭建以及使用Ember.js创建第一个静态页面

美化主页，增加邮件输入框

在主页中增加一个Bootstrap的jumbotron，在这个jumbotron组件中增加一个input输入框和一个button按钮。

在首页index.hbs中增加静态HTML代码

为了界面的美化在HTML代码中使用了很多Bootstrap的样式，更多有关Bootstrap的使用请自行学习。

<div class="jumbotron text-center">
    <h1>Coming Soon</h1>

    <br/><br/>

    <p>Don't miss our launch date, request an invitation now.</p>

    <div class="form-horizontal form-group form-group-lg row">
        <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-1 col-md-5 col-md-offset-2">
          <input type="email" class="form-control" placeholder="Please type your e-mail address." autofocus="autofocus"/>
        </div>
        <div class="col-xs-10 col-xs-offset-1 col-sm-offset-0 col-sm-4 col-md-3">
            <button class="btn btn-primary btn-lg btn-block">Request invitation</button>
        </div>

    </div>

    <br/><br/>
</div>

等待项目重启完成，可以在首页看到如下效果页面：

计算属性

计算属性简单讲它就是一个特殊点的JS函数。如果你看过Ember.js 入门指南之三计算属性（compute properties）相信使用起来会比较简单，再次不过多介绍。

计算属性使用

下面几点需求可以通过计算属性去实现：

1. 当输入框的为空时按钮“Request invitation”不可用
2. 当输入的邮箱号码格式不正确时按钮“Request invitation”不可用
3. 点击按钮“Request invitation”之后显示响应信息
4. 数据保存完成之后情况邮箱输入框的内容

isDisabled属性

既然介绍了计算属性那么应该拿来用了！我们使用属性isDisabled控制按钮“Request invitation”是否可用。在button标签上增加一个HTML属性disabled，这个HTML属性决定了按钮button是否可用。当HTML属性disabled=true时按钮不可用，当HTML属性disabled=false时按钮可用，那么如何控制这个值是true还是false呢？别忘了在Handlebars模板中可以直接使用{ {}}表达式获取属性的值，下面修改模板index.hbs，在标签button中增加属性disabled的设置：

<button class="btn btn-primary btn-lg btn-block" disabled={
    {isDisabled}}>Request invitation</button>

那要在哪里控制isDisabled的值呢？目前有2种方式，第一是在路由route中控制这个值，另外一种是在控制器controller中控制这个属性的值。有关路由的信息在前一篇已经简单介绍过，或者看Ember.js 入门指南之二十路由定义学习。与路由同理，每个模板都对应有一个同名的控制器controller，如果你学习过MVC模式那么你应该很清楚什么是控制器，Ember中的控制器作用于MVC模式中的控制器相似，不过需要注意的是从Ember 3.0之后控制器将不再支持，所以呢！会在后面用组件替代控制器，官方也是这么推荐的！更多有关控制器的介绍请看Controller Introduction。
同样的我们仍然是使用Ember CLI创建控制器，命令如下：

ember g controller index

创建好控制器之后，在控制器内添加设置属性isDisabled的代码：

// app/controller/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
    isDisabled: true
});