Добавление динамической вкладки бутстрапа перед существующей вкладкой «добавление»

Question

Я работаю с backbone.js и имею следующие listView для элемента <ul> и отдельный tabView для динамического <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 в начале, поэтому, когда пользователь нажимает на этот пункт li, происходит только создание новых вкладок.

Теперь мне нужно добавить новую вкладку до li +. В настоящее время все новые вкладки добавляются только после +.

Ниже приведено описание html метки <ul>.

<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')