Meteor学习路程（三）之数据库的例子（4）【修改】

这个例子插入的例子是在http://blog.csdn.net/miss_ll/article/details/54377748数据库基础进行继续完善的。

这几个例子都是仿照着《Meteor全栈开发》完成的哦。

接下来，会在每条展示的用户信息后面添加“修改”按钮，单击后，词条记录文字变为一个表单，提交后，词条用户信息变为修改后的内容。

（1）在client/template目录下新建一个用于展示用户信息条目的模板testsusersitem.html

<template name="useritem">
    {{#if isEditing}}
        <p>姓名：<input id="username" value="{{name}}"/></p>
        <p>年龄：<input id="age" value="{{age}}"/></p>
        <p><button>保存</button></p>
    {{else}}
        <li>name:{{name}} | age:{{age}}<span class="edit" style="color:red;cursor:pointer;">修改</span></li>
    {{/if}}
</template>

解析：isEditing的作用是判断当前用户是否处于编辑状态，判断的逻辑是session中有一个变量，记录要编辑的用户信息ID，把当前用户ID和session中的ID进行比较，如果相同，说明此用户就是编译目标，返回true，否则返回false。

（2）修改数据库调用的用户列表模板，引用新建的用户信息条目模板

<template name="testsusers">
    <ul>
        <!--循环处理testsusers数组-->
        {{#each testsusers}}
            {{> useritem}}
        {{/each}}
    </ul>
</template>

（3）新建testsusersitem.js。至于session中那个用户ID变量就是单击“修改”按钮时设置的，并且添加修改按钮的单击事件处理和单击某个用户的“修改”按钮后，此用户位置就会变为编辑表单，表单中默认填充了用户信息值

//session中那个用户ID变量就是单击“修改”按钮时设置的。
Template.useritem.helpers({
    isEditing:function () {
        //从session中取得editid值
        var eid = Session.get('editid');
        //返回对比结果
        return this._id+'' == eid;
    }
});
//添加“修改”按钮的单击事件处理
Template.useritem.events({
    'click .edit':function(e,tpl){
        e.preventDefault();
        //取得当前用户的_id
        var id = this._id;
        //设置到session
        Session.set('editid',id);
    },
    //单击某个用户的“修改”按钮后，此用户位置就会变为编辑表单，表单中默认填充了用户信息值
    'click button':function (e,tpl) {
        var name = tpl.$('#username').val();
        var age = tpl.$('#age').val();
        var id = this._id;
        TestsUsers.update({_id:id},{name:name,age:age},function () {
            Session.set('editid',-1);//设为-1表明当前没有要修改的用户
        });
    }
});

解析：tpl.$('#username').val;是把作用域限定在当前模板，否则$()会在整个页面中去查找

（4）因为使用了Session对象，因此需要添加支持包

meteor add session

（5）最终结果如下

Meteor学习路程（三）之数据库的例子（4）【修改】

猜你喜欢