Как использовать позвоночник с усами и неизвестным количеством просмотров?

Question

Я использую усы, чтобы сделать серию изображений. Каждое изображение сопровождается вводом текста для установки заголовка изображения, кнопкой обновления для обновления заголовка в базе данных через Ajax и кнопкой удаления для удаления изображения из базы данных (также через Ajax):

{{#logos}}
<div class="logo">
    <div class="logo-input">
        <input type="text" placeholder="Caption" value="{{caption}}" />
    </div>
    <div class="logo-buttons">
        <button>Update</button>
        <button>Delete</button>
    </div>
</div>
{{/logos}}

Я новичок в магистрали, и я не могу понять, как "связать" каждую кнопку обновления / удаления с соответствующим логотипом / подписью. Каков наилучший способ сделать это, учитывая, что количество изображений неизвестно во время выполнения?

Answer 1

У вас есть две проблемы:

1. Как узнать, какая кнопка нажата?
2. Как узнать, с каким логотипом вы работаете?

Самый простой способ решить первую проблему - прикрепить класс к кнопкам:

<button type="button" class="update">Update</button>
<button type="button" class="delete">Delete</button>

Затем вы можете привязать события непосредственно к кнопкам, используя вид events:

events: {
    'click .update': 'update_caption',
    'click .delete': 'delete_caption'
}

Кроме того, вы всегда должны указывать type атрибут при использовании <button>В спецификации сказано, что <button type="button"> по умолчанию, но некоторые браузеры используют <button type="submit"> вместо. Если вы всегда указываете type="button" Вам не нужно беспокоиться о том, что за чушь взбредет браузер.

Теперь вы должны выяснить, с каким логотипом вы работаете.

Один из способов заключается в том, чтобы продолжать использовать одно представление и прикрепить атрибут данных где-нибудь, что легко найти. Например:

{{#logos}}
    <div class="logo" data-logo="{{id}}">
        <!-- ... -->
    </div>
{{/logos}}

Затем вы можете делать такие вещи в обработчиках кликов:

update_caption: function(ev) {
    var id   = $(ev.currentTarget).closest('.logo').data('logo');
    var logo = this.collection.get(id);
    //...
}

Демо: http://jsfiddle.net/ambiguous/DwkPV/

Кроме того, вы можете использовать один суб-вид для каждого логотипа. Здесь у вас будет один вид для каждого логотипа:

var LogoView = Backbone.View.extend({
    className: 'logo',
    events: {
        'click .update': 'update_caption',
        'click .delete': 'delete_caption'
    },
    //...
});

и шаблон без {{#logos}} петля или внешний логотип <div>:

<div class="logo-input">
    <input type="text" placeholder="Caption" value="{{caption}}" />
</div>
<div class="logo-buttons">
    <button>Update</button>
    <button>Delete</button>
</div>

и обработчики кликов будут просто смотреть на this.model:

update_caption: function() {
    var logo = this.model;
    //...
}

Затем основной вид для перебора логотипов и рендеринга подпредставлений:

var LogosView = Backbone.View.extend({
    render: function() {
        this.collection.each(function(logo) {
            var v = new LogoView({ model: logo });
            this.$el.append(v.render().el);
        }, this);
        return this;
    },
    //...
});

Демо: http://jsfiddle.net/ambiguous/9A756/