在現有「添加」選項卡之前添加動態引導選項卡

Question

我正在與backbone.js一起工作，並且有關於<ul>元素的以下listView元素和用於動態<li>元素的單獨tabView。在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 +元素之前添加新創建的選項卡。目前所有新標籤只有在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來選擇元素，Backbone視圖有自己的預定義範圍並可以通過this.$el訪問的元素。

如果你真的需要找到裏面的視圖的el的元素，則可以使用this.$('.element-you-want')這是一個快捷方式可以選擇：

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