1. 程式人生 > >Meteor學習路程(三)之資料庫的例子(5)【刪除】

Meteor學習路程(三)之資料庫的例子(5)【刪除】

這個例子插入的例子是在http://blog.csdn.net/miss_ll/article/details/54573802資料庫基礎進行繼續完善的。


與update類似,也需要指定目標文件ID。

新增“刪除”按鈕,單擊後彈出確認提示框,確認後在集合中刪除模板文件。

(1)在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>
            <span class="remove" style="color:red;cursor:pointer">刪除</span>
        </li>
    {{/if}}
</template>
(2)testsusersitem.js中新增刪除按鈕的單擊事件
//至於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表明當前沒有要修改的使用者
        });
    },
    //刪除按鈕的單擊事件
    'click .remove':function(e,tpl){
        if(confirm('確認刪除?')){
            var id = this._id;
            //呼叫集合的remove方法,刪除
            TestsUsers.remove(id);
        }
    }
});
(3)最後結果