javascript - Meteor setPersistent 用于 CSS 样式

Question

我有这个方法，它将点击对象的不透明度更改为 0.4

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

    Session.setPersistent('class', 'toggle');
    detail.addClass(Session.get('class'));
}

在页面重新加载时，class 键的值仍然是 toggle，但 DOM 元素的样式不再使用我在 CSS 中名为 toggle，不透明度为 0.4。

我如何保留这种样式更改？

Answer 1

我通过在模型中创建一个新字段来解决它，该字段设置(或取消设置)为不透明度为 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}}">