backbone.js - 既存の「追加」タブの前に動的ブートストラップ タブを追加する

Question

私は backbone.js を使用しており、次listViewの for<ul>要素と個別tabViewの for dynamic<li>要素があります。の render メソッドで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ために、最初に 1 つの項目があるため、ユーザーがその項目をクリックすると、li新しいタブの作成のみが行われます。

ここで必要なのは、新しく作成するタブをli+ 要素の前に追加することです。現在、すべての新しいタブはthis+ 要素の後にのみ追加されています。

<ul>以下、参考までにタグのhtmlです。

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

以下のように render メソッドを変更してみましたlistViewが、うまくいきません。liむしろ、(+)要素自体の上に新しいタブを追加するだけです。

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

これを行う方法はありますか？