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

Question

注意：在我写这个问题的时候，我解决了它。由于我认为获得对我的方法的反馈对其他人和我都有用，因此我完成了对不同步骤的解释。随意 comment/answer.

您好，

我想动态 load/unload 选项卡，使用用于加载的下拉菜单和用于卸载的关闭按钮。我用 bootstrap.

查看我对方法的回答。

Answer 1

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

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

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

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"
    }
];

我迭代我的数组以加载我本地的每个项目collection

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

我加载我的 collection 元素，使用 {{#each loadedTabs}} 作为 nav-tab 和 {{#each nonLoadedTab}} 作为下拉列表。以下是助手的样子：
```
nonLoadedTabs: function(){
    return tabs.find({"loaded":false})
},
```

我添加了一个附加到关闭按钮的事件，另一个附加到下拉列表 select

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

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

加载事件取消设置 "active" 选项卡项并将其添加到当前项：

'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}});
}

或者在两个操作中使用我的 "active" 字段：

'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}});
}

关闭按钮将 "active" class 设置为找到的第一个加载的选项卡（无法找到如何获取最后一个）：

    '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 制作可关闭的标签页？我的解决方案，您的反馈

How to make closable tabs with Meteor? My solution, your feedback

javascript

jquery

twitter-bootstrap

meteor

spacebars