Hinzufügen von dynamischen Bootstrap-Registerkarte vor der vorhandenen Registerkarte "Addition"

Question

Ich arbeite mit backbone.js und haben folgende listView für <ul> Element und eine separate tabView für dynamische <li> Element. In der Rendermethode von listView erstelle ich eine neue tabView und diese el an listViewel anhängen.

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

Das ist in Ordnung und wie erwartet funktioniert.

Um eine neue Registerkarte dynamisch hinzuzufügen, habe ich eine einzelne li Element am Anfang, wenn der Benutzer klickt auf li Element nur neue Registerkarte Erstellung geschieht.

Nun, was ich brauche, ist die neu erstellen Registerkarte vor li + Element hinzufügen. Derzeit werden alle neuen Registerkarten erst nach this + element hinzugefügt.

Folgendes ist der HTML-Code des <ul> Tags als Referenz.

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

ich ausprobiert listView Verfahren wie unten machen zu ändern, aber das funktioniert nicht. Es fügt nur die neue Registerkarte über (+) li Element selbst hinzu.

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

Eine Idee, wie dies getan werden kann?

Answer 1

jQuery bietet prepend oder before Methoden je nachdem, was Sie wirklich wollen.

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> 

Hier ist eine vereinfachte Implementierung Ihrer Liste und Registerkarten:

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

Sie müssen die globale jQuery nicht zum Auswählen von Elementen verwenden, Backbone-Ansichten haben ein eigenes Element, das über this.$el zugreifbar und zwischengespeichert ist.

Wenn Sie wirklich ein Element in der Ansicht des Nötige zu finden, el, können Sie es wählen this.$('.element-you-want') mit denen ist eine Abkürzung für:

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