기존 '추가'탭 앞에 동적 부트 스트랩 탭 추가하기

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 개의 메소드를 제공합니다.

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

: 여기 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> 

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> 

는 목록과 탭의 간단한 구현입니다

전역 jQuery를 사용하여 요소를 선택하지 않아도됩니다. 백본보기에는 this.$el을 통해 사전 범위 지정 및 캐시 된 자체 요소가 있습니다.

당신이 정말로 뷰의 el 내부 요소를 찾아 낼 필요가있는 경우에, 당신은 그것을 바로 가기 인 this.$('.element-you-want')를 사용하여 선택할 수 있습니다

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