Backbone Marionette допълнителни обвивки на div: решението на tagName в други нишки не работи за раздели DYNAMIC

По-долу е даден фрагмент от примерна контрола на раздел от тук: http://layout.jquery-dev.net/demos/tabs.html

Тези раздели вътре в разделителните панели са точно това, от което се нуждая. Но имам нужда разделите да се добавят и премахват динамично въз основа на взаимодействието на потребителя. Мислех, че мога да го направя с композитни изгледи или изгледи на колекция в backbone marionette - добавяне/премахване на неща от основната колекция и раздели се появяват и изчезват в потребителския интерфейс.

Концептуално това не би трябвало да е трудно. Но трудността идва с ужасяващия проблем с допълнително опаковане на div, който е толкова обсъждан в различни теми през годините.

Допълнителни divs в изгледи на елементи и оформления в Backbone.Marionette

В моя случай всеки li в моята ul се появява обвит в свой собствен 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="/bg#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="/bg#tabs-west-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Proin dolor</a>
            </li>
    </ul>

Резултатът по-горе има сложни li, изобразени директно в ul контейнера, който също е сложен. Защо не мога да направя този изход да се случи?

Това допълнително опаковане на div изглежда е поведението по подразбиране на backbone marionette, когато itemView се изобразяват. Много отговори в тези теми са съсредоточени върху настройката на свойството tagName на li. Проблемът е, че създава празен, общ li. Погледнете буквите li във фрагмента по-горе. Те имат много свойства.

Моите li ще трябва да имат уникални идентификатори и стил и други атрибути като тези по-горе. Превръщането на tagName на изгледа на вашия артикул в li просто произвежда обикновен li във вашия изход. Как да вкарам моите динамични идентификатори и класове за оформяне и други подобни?

Първият ми опит да поправя това беше да изтегля 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="/bg#tabs-{{id}}" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-{{id}}">{{tabName}}</a>' +
             '</li>'
        ),
    });

Но това сега обгръща всеки li в моя списък в негов собствен контейнер div. Всяка комбинация от използване на el, tagName, appendHtml override създава или обвиващ елемент, или неправилни резултати - като appendHtml override кара всеки нов раздел просто да замества съществуващите раздели - така че винаги имам само един раздел, последният добавен.

Какво ми липсва тук? Защо не мога да дефинирам шаблон за li, съдържащ динамични данни в него, и да го изобразя ДИРЕКТНО в моя ul БЕЗ допълнително увиване на div около всеки елемент от списъка? Предполагам, че друг начин да формулирам въпроса е, че работя със съществуващ шаблон, който ИЗИСКВА сложни li. Как да ги създам в съставен изглед или изглед на колекция БЕЗ допълнителния опаковъчен контейнер около тях?

Backbone и Marionette изглежда обещават да могат да правят неща като това по начин, който е по-управляем, отколкото да го правите в чист jQuery. Нямам такъв опит. Какво не виждам?


view dynamic tabs composite marionette
person Robert    schedule 09.10.2013    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Не използвам 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="/bg#tabs-{{id}}" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-{{id}}">{{tabName}}</a>'
    ),
});
person TYRONEMICHAEL    schedule 09.10.2013

arrow_upward
0
arrow_downward

Относно управлението на изгледи и данни за създаване на конкретен HTML изход, предлагам ви да погледнете публикацията в моя блог тук: http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/

Това трябва да ви накара да структурирате изгледите, така че да се изобразяват правилно. След това можете да добавите http://backbonejs.org/#View-attributes към микса, за да получите вашите сложни атрибути (за които няма съществуващи Backbone атрибути като className).

person David Sulc    schedule 09.10.2013