Question

注意：当我写这个问题时，我解决了它。由于我认为对我和其他人都有用，对我的方法有反馈，我完成了不同步骤的解释。随意评论/回答。

您好，

我想使用下载加载和关闭按钮来动态加载/卸载标签。我使用bootstrap。

请参阅我的答案。

Answer 1

在我看来，这是实现这一目标的最佳方式：

在我的template.created函数中，我创建了一个本地集合，如下所示
```
tabs = new Meteor.Collection(null);
```

我创建了一个数组来保存我的集合数据

var myArray = [
{
        "name": "List",
        "template": "This is the list view",
        "loaded": true,
        "active": true,
        "diplayed": true,
        "icon": "fa fa-bars"
    },
    {
        "name": "Gallery",
        "template": "This is the gallery view",
        "loaded": false,
        "active": false,
        "diplayed": false,
        "icon": "fa fa-bars"
    }
];

我迭代我的数组以加载本地集合中的每个项目

for (var i = 0; i < myArray.length; i++) {
    tabs.insert(myArray[i]);
}

我使用导航标签{{#each loadedTabs}}加载我的收藏元素，下拉列表使用{{#each nonLoadedTab}}。以下是帮助者的样子：
```
nonLoadedTabs: function(){
    return tabs.find({"loaded":false})
},
```

我添加一个附加到关闭按钮的事件，另一个添加到下拉选择

'click .closeTab' : function(){
    tabs.update (this._id, {$set: {loaded:false}});
},
'click .tab_load_button' : function(){
    tabs.update (this._id, {$set: {loaded:true}});
}

现在我必须在右侧选项卡中添加“active”类，以便让bootstrap处理选项卡内容显示。为此，我在点击事件中添加了几行。

加载事件取消设置“活动”标签项并将其添加到当前标签项：

'click .tab_load_button' : function(){
    //remove the "active" in other tabs
    $(".nav-tabs").each(function() {
        if($(this).find("li.active")) {
            $(this).find("li.active").removeClass("active");
        }       });
    //update the newly loaded/active tab
    tabs.update (this._id, {$set: {loaded:true, active:true}});
}

或者在两个操作中使用我的“活动”字段：

'click .tab_load_button' : function(){
     //remove the "active" in other tabs
     tabs.update ( {active:true}, {$set: {active:false}});
     //update the newly loaded/active tab
     tabs.update (this._id, {$set: {loaded:true, active:true}});
}

关闭按钮将“活动”类设置为找到的第一个加载选项卡（找不到如何获取最后一个）：

    'click .closeTab' : function(){
    tabs.update (this._id, {$set: {loaded:false}});
    //if we closed an active tab...
    if (this.active){
        //set the first loaded tab as active
        tabs.update ( {loaded:true}, {$set: {active:true}},{multi:false});
    }
},

如何使用Meteor制作可关闭的标签？我的解决方案，您的反馈

1 个答案: