`prepend`

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来选择元素，Backbone视图可以通过this.$el预先定义和缓存自己的元素。

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

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

在现有的“添加”之前添加动态引导标签。标签

1 个答案:

`prepend`

`before`