在现有'addition'选项卡之前添加动态引导选项卡

Question

我正在使用backbone.js，并有以下listView为<ul>元素和单独的tabView为动态<li>元素。在listView的渲染方法中，我创建了一个新的tabView，并将el附加到listView el。

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来选择元素，骨干视图有自己的元素预作用域和缓存，可以通过this.$el访问。

如果你真的需要在视图的el中找到一个元素，你可以使用this.$('.element-you-want')来选择它，这是一个快捷方式:

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