Backbone.js 在现有的'；添加'；标签

我正在使用backbone.js，为

元素提供了以下

列表视图

，为动态

元素提供了一个单独的

选项卡视图

。在

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

我尝试过像下面这样更改

listView

render方法，但这不起作用。相反，它只是在（+）

li

元素本身的顶部添加新选项卡

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

---

你知道怎么做吗？

jQuery提供了

prepend

或

before

方法，具体取决于你真正想要什么

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

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

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

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

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

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