Ember进行修改操作详解

Ember进行修改操作详解

木来 木来

要想对一个列表中的某一行进行修改操作,首先,你需要拥有这2个页面

列表list页面,修改信息的页面

其次,你为了实现其功能,你需要有一个controller来实现具体的修改功能。

于是,我们根据之前的人员信息表user页面来作为我们的列表页面。

然后我们需要写一个update信息的页面。


首先,打开命令行进入我们的项目

然后,我们输入下面的命令来建立我们的update信息页面

ember g route updateuser

然后建立我们需要进行修改信息的controller

ember g controller updateuser

建立好之后,我们打开app/templates/updateuser.hbs页面

写入以下代码,其实这个页面就是根据添加用户页面进行了部分修改而已

 
<h3>修改用户信息</h3>

 <div>

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


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

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

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

            
                            <button {{ action "updateItem" model.schoolnumber}}>保存</button>
                            <font color='red'>{{tipInfo}}</font>
                     </div>


                     <div>

                     </div>

然后,我们需要修改一下用户列表页面,也就是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 >
 {{#link-to 'updateuser'  user}}济宁学院时玉龙作业{{/link-to}}
    </td>

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


  </tr>

  {{/each}}

</table>


<!--

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

其实就是对修改文章的列部分进行了修改,使用link-to标签指向了我们写的修改用户的页面,然后传递了一个用户参数。

然后,我们需要打开app/router.js

进行下列修改,如果你项目不是按照我一步步来的,请不要都直接复制粘贴。

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('scientists');
  this.route('user');
  this.route('adduser');
  this.route('updateuser',{path: '/:user_id'});
});

export default Router;

然后,我们需要打开app/routes/updateuser.js来对通过用户列表页面传过来的参数进行操作处理

import Ember from 'ember';

export default Ember.Route.extend({


model(params){
   // alert(params.user_id)
   //    alert(params.schoolnumber)
var user =this.store.findRecord('users',params.schoolnumber);
return [user];

}

});

这样便实现了当在用户列表页面点击修改操作,便跳转到了信息修改页面,并且成功的将所有的信息进行了回显操作。

效果如下图:

test.gif

但是不要高兴的太早,还有一个很重要的功能还没有实现。

那便是信息的修改功能。

这个需要我们打开app/controllers/updateuser.js

import Ember from 'ember';

export default Ember.Controller.extend({


       actions: {
 
       updateItem:function(params) {




   var schoolnumber = this.get('model.schoolnumber');

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

            var sex = this.get('model.sex');
            var age = this.get('model.age');


    this.store.findRecord('users', params).then(function(user) {
                user.set('schoolnumber', schoolnumber);
                user.set('name', name);
                   user.set('sex', sex);
                user.set('age', age);
                //  保存更新的值到Store
                user.save();




              });

this.transitionToRoute('user');



       }//updateitem


       }








});









         
        







这样便实现了信息修改的功能。

效果如下:

test1.gif

0 条评论