1

我正在使用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);

知道如何做到这一点吗？

4

1 回答 1

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')
于 2016-10-06T04:00:10.893 回答