Question

我有一个客户端方法，通过添加一个不透明度设置为0.4的类来在DOM中渲染渲染文档：

   'click .detailCheckbox': function(ev){
    var detail = $(ev.target).parent();

    if(!detail.hasClass('toggle')){
        detail.addClass('toggle');  
    } else {
        detail.removeClass('toggle');
    }

}

但是，当我重新加载页面时，DOM元素不再灰显，因为我从未在服务器上更新文档。

我是否必须在这里获得超级创意，或者我错过了解决这个问题的简单方法？

Answer 1

您可以使用meteor-persistent-session package。

Session.setPersistent(key, value) //store a persistent session variable (persistent)

例如。

 if(!detail.hasClass('toggle')){
        detail.addClass('toggle');
        Session.setPersistent('opacity',0.4)  
    } else {
        detail.removeClass('toggle');
        Session.clear('opacity')
    }

Answer 2

我通过在模型中创建一个新字段来解决它，该字段被设置（或取消设置）到具有不透明度0.4的类名

以下是包含字段checkboxStatus

的Meteor方法插入方法

addDetail: function(detailFormData){
    if(! Meteor.userId()){
        throw new Meteor.Error('not-authorized');
    }

    detailsCollection.insert({
        detail: detailFormData.detail,
        parentId: detailFormData.parentId,
        checkboxStatus: detailFormData.checkboxStatus  
    });
}

我点击复选框后调用它：

'click .detailCheckbox': function(ev){
    ev.preventDefault();

    Meteor.call('setToggle', this._id);
}

setToggle Meteor方法检查切换状态，然后相应地更新文档

setToggle: function(detailId){
    var checked_detail = detailsCollection.findOne({_id: detailId});

    if(checked_detail.checkboxStatus != 'toggle'){
        detailsCollection.update(detailId, {
            $set: {checkboxStatus: 'toggle'}
        });
    } else {
        detailsCollection.update(detailId, {
            $set: {checkboxStatus: 'untoggle'}
        });
    }

}

然后由模板助手方法

调用

checkboxStatus: function(){
    var checked_detail = detailsCollection.findOne({_id: this._id});
    return checked_detail.checkboxStatus;
}

其值在模板项本身的类标记中返回

<li id={{_id}} class="detailViewEntry {{checkboxStatus}}">

如何将本地CSS更改持久保存到服务器记录？

2 个答案: