Question

以HTML标签栏为例。通常你有一个ul和一个div的列表。我找到的所有Backbone示例都通过'el'，'tagName'等将View链接到一个节点......

HTML TabBar：

<div class=".tabbar">
    <ul class=".tabbar-header">
        <li><a href="#tab-cars">Cars</a></li>
        <li><a href="#tab-houses">Houses</a></li>
    </ul>

    <div id="tab-cars" class=".tabbar-item">...</div>
    <div id="tab-houses" class=".tabbar-item">...</div>
</div>

骨干代码：

window.TabBarView = Backbone.View.extend({

    el: ???,

    tabs: [],   

    render:function (eventName) {

        // Render all tabs in this.tabs

        _.each(this.tabs, function (item, position) {
            // Render each tab with item.render()
        }, this);

        return this;
    }
});

window.TabBarItemView = Backbone.View.extend({

    el: ???,

    initialize:function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render:function (eventName) {

        // Render the tab header and tab content

        return this;
    }

});

我想在TabBarView中添加几个TabBarItemView，每个TabBarI都会创建ul.tabbar-header内的li节点和div.tabbar-item作为内容。

Answer 1

我写过一篇解决此问题的文章：http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

它将向您展示如何使用单个视图来执行您想要的操作，或者如何使用您在示例代码中显示的集合视图和项目视图进行父/子设置

Answer 2

您可以创建单独的导航视图，并让导航通过tab-item-view的render方法添加项目。

当您渲染标签项视图时，您会执行navigation.add(new nav item);之类的操作并添加一种删除导航项的方法。

或者您可以使用纯HTML继续导航，并在渲染下面的标签时使用jquery / javascript附加<li>项。

不能给你一个完整的例子，如果你真的需要它，我今晚可能会做一个，。

如何创建具有两个或更多喜欢节点的Backbone View？

2 个答案: