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

Question

私はbackbone.jsを使っていて、<ul>要素の場合はlistView、動的な場合は要素の場合は<li>要素です。 listViewのレンダリングメソッドでは、新しいtabViewを作成し、elをlistViewelに追加しています。

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> 

私は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を使用してエレメントを選択する必要はありません。バックボーン・ビューは、this.$elによってアクセス可能な事前スコープの独自のエレメントを持っています。

あなたが本当にビューのel内部の要素を見つける必要がある場合、あなたはそれがショートカットであるthis.$('.element-you-want')を使用して選択することができます。

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