Question

我在为每个Marionette.ItemView输出标记时遇到问题，我需要在我的模板中放置一个tr，而不是将其指定为ItemView tagName但是每个我的tr标签作为标准包装在div中，这打破了布局并混淆了语义。任何人都可以建议我如何解决这个问题？我需要模板中的tr，因为我需要按数组长度输出多个tr标记。

JS

var PersonView = Marionette.ItemView.extend({

    template: '.js-person-tmpl',

    templateHelpers: function () {
        return {
            availableClasses: this.options.availableClasses.toJSON()
        }
    },

    initialize: function () {
        console.log('PersonView::initialize', this.options);
    }
});

// CompositeView Class
var PersonsView = Marionette.CompositeView.extend({

    template: '.js-persons-tmpl',
    childView: PersonView,
    childViewContainer: '.js-tbody',

    childViewOptions: function () {
        return {
            availableClasses: this.options.available
        }
    },

    initialize: function () {
        console.log('PersonsView::initialize', this.options);
    },

    onRender: function () {
        console.log('PersonsView::onRender');
    }
});

模板

<script type="text/html" class="js-person-tmpl">
    <% _.each(bookedClasses, function(booked, i) { %>
    <tr> 
        <% if(i == 0) { %>
            <td rowspan="2"><%= name %></td>
        <% } %>
        <td>
            <%= booked %>
            <button class="action action--remove js-action--remove"><svg viewBox="0 0 24 24"><g><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M16.9,15.5l-1.4,1.4L12,13.4l-3.5,3.5   l-1.4-1.4l3.5-3.5L7.1,8.5l1.4-1.4l3.5,3.5l3.5-3.5l1.4,1.4L13.4,12L16.9,15.5z"/></g></svg></button>
        </td>
        <td>
            <select>
                <option>Please select...</option>
                <% _.each(availableClasses, function(available) { %>
                    <option value="<%= available.id %>"><%= available.name %></option>
                <% }) %>
            </select>
        </td>
    </tr>
    <% }) %> 
</script>

小提琴： http://jsfiddle.net/kyllle/tx62jrvg/19/

每个ItemView呈现当前输出：

<div>
    <tr> 
        <td>Kenneth Wise</td>
        <td>
            375
            <button class="action action--remove js-action--remove"><svg viewBox="0 0 24 24"><g><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M16.9,15.5l-1.4,1.4L12,13.4l-3.5,3.5   l-1.4-1.4l3.5-3.5L7.1,8.5l1.4-1.4l3.5,3.5l3.5-3.5l1.4,1.4L13.4,12L16.9,15.5z"></path></g></svg></button>
        </td>
        <td>
            <select>
                <option>Please select...</option>

                    <option value="34">Core Evo</option>

                    <option value="686">Core Body Workout</option>

                    <option value="870">Boxercise</option>

                    <option value="1345">Rapid Circuits</option>

            </select>
        </td>
    </tr>

    <tr> 
        <td>Kenneth Wise</td>
        <td>
            980
            <button class="action action--remove js-action--remove"><svg viewBox="0 0 24 24"><g><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M16.9,15.5l-1.4,1.4L12,13.4l-3.5,3.5   l-1.4-1.4l3.5-3.5L7.1,8.5l1.4-1.4l3.5,3.5l3.5-3.5l1.4,1.4L13.4,12L16.9,15.5z"></path></g></svg></button>
        </td>
        <td>
            <select>
                <option>Please select...</option>

                    <option value="34">Core Evo</option>

                    <option value="686">Core Body Workout</option>

                    <option value="870">Boxercise</option>

                    <option value="1345">Rapid Circuits</option>

            </select>
        </td>
    </tr>
</div>

Answer 1

一种可能的解决方案是不将预订的类存储在Person模型上，而是引入一个存储类和人的Booking模型。

var Booking = Backbone.Model.extend({
    defaults: {
        person: null,
        klass: null
    }
});

var Bookings = Backbone.Collection.extend({
    model: Booking
});

每次有人预订课程时，您都会创建一个新的Booking模型。您使用Bookings呈现PersonsView集合，其中PersonView代表一个tr。这样，您可以将PersonView::tagName设置为'tr'。

预订的虚拟数据将是：

var bookings = [{
    person: 1,
    klass: 375
}, {
    person: 1,
    klass: 980
}, {
    person: 2,
    klass: 234
}, {
    person: 2,
    klass: 768
}];

当tr必须存在于模板中时，使用Marionette ItemView生成的非语义表标记

1 个答案: