0

下面是来自此处的示例选项卡控件的片段：http: //layout.jquery-dev.net/demos/tabs.html

这些拆分器窗格中的那些选项卡正是我所需要的。但我需要根据用户交互动态添加和删除选项卡。以为我可以使用骨干木偶中的复合视图或集合视图来做到这一点 - 从底层集合中添加/删除内容，并且选项卡在 UI 中出现和消失。

从概念上讲，这应该不难。但困难来自于多年来在各种线程中讨论的可怕的额外包装 div 问题。

Backbone.Marionette 中的 itemview 和布局中的额外 div

就我而言，我 ul 中的每个 li 都包裹在它自己的 div 中。这弄乱了下面代码片段中的 CSS。它打破了一些，所以事情看起来很奇怪。如果我能产生下面的输出，事情看起来就不会奇怪了。

    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable" role="tablist">
            <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-west-1" aria-labelledby="ui-id-1" aria-selected="true">
                <a href="#tabs-west-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Nunc tincidunt</a>
            </li>
            <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-west-2" aria-labelledby="ui-id-2" aria-selected="false">
                <a href="#tabs-west-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Proin dolor</a>
            </li>
    </ul>

上面的输出在 ul 容器中直接渲染了复杂的 li，这也很复杂。为什么我不能使输出发生？

当 itemView 被渲染时，这个额外的包装 div 似乎是骨干木偶的默认行为。这些线程中的许多答案都集中在将 tagName 属性设置为 li。问题是会产生一个空白的通用 li。看看上面片段中的 li。他们有很多属性。

我的 li 将需要具有唯一的 id 和样式以及其他属性，例如上面的那些。将项目视图的 tagName 设置为 li 只会在输出中生成一个简单的 li。如何在其中获取我的动态 id 和样式类等？

我第一次尝试解决这个问题是将 li 代码拉到我的车把模板中，这样我就可以用我需要的动态数据对其进行编码：

    var TabItemView = Marionette.ItemView.extend({
        template: Handlebars.compile(
            '<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-{{id}}" aria-labelledby="ui-id-{{id}}" aria-selected="true">' +
                '<a href="#tabs-{{id}}" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-{{id}}">{{tabName}}</a>' +
             '</li>'
        ),
    });

但这现在将我列表中的每个 li 包装在它自己的容器 div 中。使用 el、tagName、appendHtml 覆盖的每种组合都会产生一个包装元素或不正确的结果——比如 appendHtml 覆盖会导致每个新选项卡简单地替换现有选项卡——所以我只有一个选项卡，即添加的最新选项卡。

我在这里想念什么？为什么我不能为其中包含动态数据的 li 定义一个模板并将其直接呈现给我的 ul 而无需在每个列表元素周围额外包装 div？我想用另一种方式来表达这个问题是我正在使用一个需要复杂 li 的现有模板。如何在没有额外包装容器的情况下在复合视图或集合视图中生成它们？

Backbone 和 Marionette 似乎提供了能够以比直接使用 jQuery 更易于管理的方式执行此类操作的承诺。我没有那种经历。我没看到什么？

4

2 回答 2

0

我不使用 Marionette，但我不明白为什么它会覆盖 Backbone 的默认行为。这应该给你一个想法：

var TabView = Marionette.ItemView.extend({
    tagName: 'ul',
    className: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable" role="tablist',
    render: function() {
         //something like this
         var _this = this;
         this.collection.each(function(item){
             var view = new TabItemView({
                 model: item
             });
             _this.$el.append(view.render().el)
         })
     }
});

var TabItemView = Marionette.ItemView.extend({
    tagName: 'li',
    className: 'ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tablist',
    template: Handlebars.compile(
        '<a href="#tabs-{{id}}" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-{{id}}">{{tabName}}</a>'
    ),
});
于 2013-10-09T07:22:14.517 回答
0

关于管理视图和数据以产生特定的 HTML 输出，我建议您在这里查看我的博客文章：http: //davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes -复合视图/

这应该让您构建视图，以便它们正确呈现。然后，您可以将http://backbonejs.org/#View-attributes添加到组合中以获取您的复杂属性（没有现有的 Backbone 属性，例如 className）。

于 2013-10-09T10:03:38.140 回答