Ember创建模型实现添加操作

Ember创建模型实现添加操作

木来 木来

首先,需要创建一个名字叫users 的model模型。

打开命令行窗口,进入自己的项目

输入下面的语句

ember g model users

然后,我们进入app/model/users.js,对users模型设置一些属性

import DS from 'ember-data';
//时玉龙作业作品
export default DS.Model.extend({
    //学号
    schoolnumber:DS.attr("number"),
//姓名
 name: DS.attr('string'),
 //性别
       sex: DS.attr('string'),
       //年龄
       age: DS.attr('number')

});

然后,我们生成两个界面,一个是用户展示列表页面,类似于之前做的“科学家”页面,另一个是添加用户信息页面。

ember g route user
ember g route adduser

当然啦,还会自动生成对应的路由js


先看一下添加用户页面,也就是adduser.hbs

 <div>

         学号:{{input value=schoolnumber}}<br><br>


                            姓名:{{input value=name}}<br><br>

   性别:{{input value=sex}}<br><br>

      年龄:{{input value=age}}<br><br>

            
                            <button {{ action "saveItem"}}>保存</button>
                            <font color='red'>{{tipInfo}}</font>
                     </div>

我们会通过写一些用户的信息,然后通过保存按钮,跳转到一个controller来实现具体的添加功能。

因此,我们首先要先生成一个名字为adduser的controller控制器

ember g controller adduser

然后我们打开app/controller/adduser,填写具体的功能

import Ember from 'ember';

export default Ember.Controller.extend({



       actions: {
 
              //  表单提交,保存数据到Store。Store会自动更新到firebase
              saveItem: function() {



  var schoolnumber = this.get('schoolnumber');
                     if ('undefined' === typeof(schoolnumber) || '' === schoolnumber.trim()) {
                            this.set('tipInfo', "学号不能为空");
                            return ;
                     }




                     var name = this.get('name');



                     if ('undefined' === typeof(name) || '' === name.trim()) {
                            this.set('tipInfo', "姓名不能为空");
                            return ;
                     }




                        var sex = this.get('sex');
                     if ('undefined' === typeof(sex) || '' === sex.trim()) {
                            this.set('tipInfo', "性别不能为空");
                            return ;
                     }

                        var age = this.get('age');
                     if ('undefined' === typeof(age) || '' === age.trim()) {
                            this.set('tipInfo', "年龄不能为空");
                            return ;
                     }






 
 
                     //  创建数据记录
                     var user = this.store.createRecord('users', {
                        schoolnumber:schoolnumber,
                            name: name,
                            sex: sex,
                            age: age
                     });
                     user.save();  //保存数据的到Store
                     //  清空页面的input输入框
                    this.set('schoolnumber', "");
                     this.set('name', "");
                     this.set('sex', "");
                     this.set('age', "");
              }
       }






});

然后看一下tracker\app\templates\user.hbs

<h2>用户列表</h2>

<table border="1" width="700px" >
  <tr>
   <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>修改</th>
    <th>删除</th>
  </tr>


 {{#each model as |user|}}

  <tr>
  <td>
{{user.schoolnumber}}
    </td>




    <td>
{{user.name}}
    </td>

    <td>
{{user.sex}}
    </td>

   <td>
{{user.age}}
    </td>
   <td {{action "updateInfo" user}}>
 修改
    </td>

   <td {{action "deleteInfo" user}}>
 删除
    </td>


  </tr>

  {{/each}}

</table>


<!--

<ul>
  {{#each people as |person|}}
    <li {{action "showPerson" person}}> {{person}}</li>
  {{/each}}
</ul>
-->

再看一下app/routes/user.js

import Ember from 'ember';

export default Ember.Route.extend({


model(){

// let record1 =this.store createRecord('user',{
// name:'小明',
// sex:'男',
// age:'18'

// });






// var user2 = this.store.createRecord('users', {
//                             name: '小红',
//                             sex: '女',
//                             age:'17'
//                      });

// var user3 = this.store.createRecord('users', {
//                             name: '小蓝',
//                             sex: '男',
//                             age:'22'
//                      });




// return [user1,user2,user3];
// 
// 
return this.store.findAll('users');

}







});

这样,我们就实现了用户列表的添加与查询操作。

导航栏的链接你们看着自己改就是了。

效果如下图:

test1.gif

0 条评论