在现有 'addition' 选项卡之前添加动态 bootstrap 选项卡

Question

我正在与 backbone.js 合作，listView 用于 <ul> 元素，单独的 tabView 用于动态 <li> 元素。在 listView 的渲染方法中，我正在创建一个新的 tabView 并将 el 附加到 listView el。

var listView = Backbone.View.extend({
    //<ul> element for tabs
    el: '.nav-tabs',
    render: function(model) {
        var tabView = new TabView({ model: model });
        tabView.render();
        $(this.el).append(tabView.el);
    }

var TabView = Backbone.View.extend({
    //create <li> element to hold each tab
    tagName: "li",
    className: "currentTab ",
    render() {
        var html = this.template(this.model.attributes);
        $(this.el).append(html);
        //creates new div for tab content
        var tabContent = new TabContentView({ model: this.model });
        tabContent.render();
    }

这很好，按预期工作。

要动态添加新标签，我在开头有一个 li 项目，因此当用户单击该 li 项目时，只会创建新标签。

现在我需要的是在 li + 元素之前添加新创建的选项卡。目前所有的新标签都是在 this + element.

之后添加的

以下是<ul>标签的html，供参考。

<div id="test">
    <ul class="nav nav-tabs ">
        <li><a href="#" class="add-newTab">+</a></li>
    </ul>
</div>

我试过像下面这样更改 listView 渲染方法，但这不起作用。相反，它只是在 (+) li 元素本身之上添加新选项卡。

tabView.render();
$(this.el).find(".add-newTab").before(tabView.el);

知道如何做到这一点吗？

Answer 1

jQuery 根据您的实际需要提供 prepend 或 before 方法。

`prepend`

<ul class="nav nav-tabs ">
    <li>prepending adds element here</li>
    <li></li>
    <li class="plus"><a href="#" class="add-newTab">+</a></li>
</ul>

`before`

<ul class="nav nav-tabs ">
    <li></li>
    <li>before adds element here when used on $('.plus')</li>
    <li class="plus"><a href="#" class="add-newTab">+</a></li>
</ul>

这是列表和选项卡的简化实现：

var TabView = Backbone.View.extend({
    //create <li> element to hold each tab
    tagName: "li",
    className: "currentTab", // why? all tabs will have "currentTab"

    initialize: function() {
        //creates new div for tab content
        this.tabContent = new TabContentView({
            model: this.model
        });
    },

    // render should only renders, and should be idempotent.
    render: function() {
        this.$el.empty().append(tabContent.render().el);

        // returning "this" is the default in Backbone, which enables
        // chaining method calls.
        return this; 
    }
});

var ListView = Backbone.View.extend({
    //<ul> element for tabs
    el: '.nav-tabs',
    template: '<li class="plus"><a href="#" class="add-newTab">+</a></li>',
    events: {
        "click .add-newTab": "onAddTab",
    },
    render: function() {
        this.$el.empty().append(this.template);

        // cache the '+' li element.
        this.$plus = this.$('.plus');
        return this;
    },

    onAddTab: function(e) {
        var tabView = new TabView({ model: this.model });

        // the magic happens here.
        // if you want the tab at the beginning of the ul:
        this.$el.prepend(tabView.render().el);

        // or if you want it at the end, but before the + :
        this.$plus.before(tabView.render().el);
    },
});

您不需要使用全局 jQuery 到 select 元素，Backbone 视图有自己的元素预作用域和缓存，可通过 this.$el 访问。

如果您确实需要在视图的 el 中查找元素，您可以 select 使用 this.$('.element-you-want') 来查找它，这是以下内容的快捷方式：

$(this.el).find('.element-you-want')

在现有 'addition' 选项卡之前添加动态 bootstrap 选项卡

Adding dynamic bootstrap tab before the existing 'addition' tab

backbone.js

bootstrap-tabs

`prepend`

`before`